1. 父向子组件通信——props
// 父组件中prop用中划线连接
<child case-message="hello!"></child>
export default {
props: {
// 子组件中用驼峰接收prop
caseMessage : {
// type 不加引号
type : String,
// 如果是引用类型（数组、对象）要写成function形式
default : ""
}
}
}
- 传递
props时，除了需要传入字符串以为，其余都需要加 : 冒号
<child :message="2"></child> // 数字2
<child :message="true"></child> // 布尔值true
<child :message="[1,2,3]"></child> // 数组
<child :message="{a:1,b:2}"></child> // 对象
<child :message="kimi"></child> // 变量
<child message="kimi"></child> // 字符串
- 不要直接修改传入子组件的
props，如果有需要修改，复制一份到自己的data中。
2. 子向父组件通信——$emit
// 父组件 —— 父组件用事件接收子组件传来的值
<button-counter @increment="incrementTotal"></button-counter>
// 子组件
methods: {
incrementCounter: function () {
// 子组件派发自定义事件给父亲，第一个参数是事件名，第二个参数是传给父亲的数据
this.$emit('increment', data)
}
}
- 如果需要给组件加原生事件
(click,mouseover,mpuseup...)，需要用到native。
<button-counter @increment="incrementTotal" @click.native="clickFunction"></button-counter>
- 自定义事件不带参数，默认传入子组件传递的数据到参数中，且自定义事件不存在事件对象
($event.target)，而原生事件默认会传入事件对象($event)
<button-counter @increment="incrementTotal" @click.native="clickFunction"></button-counter> //无参数
methods: {
// 自定义事件
incrementTotal(data) {
// 子组件传递给父亲的data
console.log(data)
}
// 原生事件
clickFunction($event) {
// 事件对象 其中有鼠标位置 dom对象等常用的信息
console.log($event)
// $event.target.value 可以实时获取输入框的值
}
}
<button-counter @increment="incrementTotal($event,222)" @click.native="clickFunction($event,333)"></button-counter>
// 需要带自己的参数，则用$event来接收子组件传入的数据和事件对象。
//只能写$event
methods: {
// 自定义事件
incrementTotal(data, val) {
console.log(data) // 子组件传递给父亲的data
console.log(val) // 222
}
// 原生事件
clickFunction($event, val) {
console.log($event) // 事件对象 其中有鼠标位置 dom对象等常用的信息
console.log(val) // 333
}
}
3. 组件与组件通信—— $emit/$on 或 VUEX（用VUEX）
