一、props
组件间通信:通过标签属性
子组件在接收父组件传递过来的值,需要声明接收属性,这个属性会成为子组件对象的属性。
在父组件定义MyComponent时:
<my-component name='tom' :age='3' :set-name='setName'></my-component>
1.在子组件内声明接收属性
// 方式一:只指定名称
props: ['name', 'age', 'setName']
// 方式二:指定名称和类型
props: {
name: String,
age: Number,
setNmae: Function
}
// 方式三:指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
注意:
(1)此方式用于父组件向子组件传递数据
(2)所有标签属性都会成为组件对象的属性,模板页面可以直接引用
(3)问题:
a. 如果需要向非子后代传递数据必须多层逐层传递
b. 兄弟组件间也不能直接 props 通信,必须借助父组件才可以
二、自定义事件
<button @click="addContent">添加</button>
数据在哪个组件,更新数据的行为(方法)就应定义在哪个组件。
当前数据在App组件中:
App.vue在定义addComments添加
methods: {
addComments(comment){
this.comments.unshift(comment);
},
在子组件中调用父组件的方法:
(1)传递数据:标签数据addComments会成为Add组件对象的属性,可以直接调用
<Add :addComments="addComments"/>
(2)Add组件声明接收属性
props:{
addComments:{
type:Function,
required:true
}
}
(3)调用该属性
this.addComments(comment);
注意:
a:此方法用于子组件向父组件发送消息(数据)