组件 一个可被复用的视图判断
使用组件三步
在页面中使用两种方式
组件名称作为自定义元素名称 <home> </home>
使用组件元素,一定要定义is属性 <componentis=”home”></component>
is是一个普通属性,其值是一个字符串,想变成变量就要通过v-bind变成一个动态的属性
在js中定义组件类 Vue.extend方法定义,
参数是一个对象,在这个对象中我们可以定义组件一些配置
注册组件,Vue.component
第一个参数表示组件名称
第二个参数表示组件类
注意,一定要定义vue实例化对象,并且组件一定要在vue实例化对象内
Template 定义组件的模板,它是一个字符串
Data 为组件绑定数据,注意他的值是一个方法,返回值才是要绑定的数据
Props 将组件属性中的数据映射到组件内部
他的值是一个数组,数组中每个成员表示一个属性名称,该名称会被映射组件实例化对戏那个中变量,通过这种方式我们可以实现由父组件向子组件传递数据,
在子组件中放该实例化对象中$parent属性也可以访问父组件中的数据(但是不建议,因为后耦合在一起了)
组件通信(子组件向父组件传递数据),观察者模式实现的
子组件发送消息
$dispatch
第一个参数表示消息名称
第二个参数表示自定数据
在父组件中注册消息
Events 消息要注册在events属性中,他的值是一个对象
对象的名称表示消息的名称
对象的属性值表示消息处理函数,
参数就是发送时候传递参数
作用域就是vue实例化对象,通过this可以访问实例化对象中数据
子组件向父组件发送消息还可以通过$parent.数据 = 值,的方式向父组件传递数据,(不推荐,因为耦合在一起了)
联系客服