关于组件定义:
如果Vue.component()在注册组件的时候,组件名称和组件模板对象变量名一致,那么可以简写为
image.png
关于父向子组件传值(属性):
默认情况下,子组件中无法访问父组件中的data上的数据和methods中的方法.
可以通过数据绑定的形式,把父组件的数据传递给子组件,需要在子组件使用的时候通过:属性名 = "父组件中的数据名"进行传递.
image.png
子组件中props和data的区别:
在子组件内部,属性必须在props这个列表中声明,否则 子组件无法使用,props列表中的属性都是父组件传递过来的.并且props中的数据都是只读的,无法重新赋值.Vue会报红色警告
而子组件中data中的数据,并不是父组件传递过来的,而是子组件自身私有的,比如说 ajax请求回来的数据都可以放在data身上.并且data上的数据都是可读可写的.
image.png
关于父向子组件传值(方法):
通过事件绑定给子组件传递方法引用,在子组件中通过
this.$emit('func')进行方法调用,传递参数可以通过this.$emit('func',param1,param2)进行调用
image.png
image.png
关于子向父组件传递数据
原理:实际上是父组件首先通过事件绑定机制,把事件传递给子组件,然后子组件进行调用的时候把自己的data中的数据传递给父组件的方法,然后在父组件的方法内,可以用过this.params = data,进行存储.这样可以实现子组件向父组件传递数据.
Vue获取指定DOM对象:
使用this.$refs.引用名,可以在DOM元素上通过ref属性指定引用名称,也可以引用组件
image.png
image.png
简便的方法进行父子组件传值:
父组件向子组件传值:this.$refs.'子组件的ref属性'
子组件向父组件传值:this.$parent
通过这种方式,都可以直接获取到对应组件的DOM节点对象.
非父子组件间的通信---通过广播的形式进行通信
1.创建一个js文件,然后引入vue,实例化通过export default暴露出去
2.在要广播的地方引入刚才的实例,通过VueEvent.on('名称')来接收数据.
关于路由:
后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
前端路由:对于单页面应用程序来说,主要是通过URL中的hash(也就是#号)来实现不同页面之间的切换,同时,hash也有一个特点,HTTP请求中不会包含hash相关的内容,所有,单页面程序中的页面跳转主要是用hash来实现的(其实就是html页面中的锚点,通过a标签进行跳转)
vue-route模块的使用:
首先通过