父组件向子组件进行数据传递,当父组件中的数据变化时,将自动传递给子组件。不允许子组件直接修改父组件中的数据。如果想实现子组件的数据变化,同步更新到父组件,有两种方式。
方式1:使用.sync修饰符+显式触发一个更新事件
方式2:将父组件中的数据包装成对象,然后在子组件中修改对象的属性
<body>
<div id="app">
<comp-a>
</comp-a>
</div>
<template id='a'>
<div>
<p>父组件msg:{{msg}}</p>
<p>父组件arr:{{arr}}</p>
<button @click="changeData()">改变msg</button>
<comp-b :msg.sync="msg" :arr="arr"></comp-b>
</div>
</template>
<template id='b'>
<div>
<p>子组件msg:{{msg}}</p>
<p>子组件arr:{{arr}}</p>
<button @click="arr.push(4)">改变数组</button>
<button @click="$emit('update:msg','hi')">改变msg</button>
</div>
</template>
</body>
new Vue({
el: '#app',
data() {
return {
}
},
components: {
'comp-a':{
template: '#a',
data() {
return {
msg: 'welcome',
arr: [1, 2, 3],
}
},
methods:{
changeData(){
this.msg = "hello"
}
},
components: {
'comp-b': {
template: '#b',
props: {
msg: {
type: String
},
arr: {
type: Array
}
}
}
}
}
}
});
父组件中定义了msg和arr,分别是String类型和Array类型,以属性绑定的方式向子组件中传递数据。
触发changeData()事件后,可改变父组件中的msg值,子组件中对应属性的值也会被改变。
如果改变子组件中的msg值,无法响应到父组件,而改变arr值,父组件中的对应数据也会发生相应改变。这是因为数组、对象是引用数据类型,父组件和子组件属性名对应的是同一块存储空间,无论通过哪个进行修改,值都发生相应变化。
如果想要达到和传递数组、对象这种类型的值一样的效果,需要父组件在进行属性绑定时,给基础数据类型的属性添加sync修饰符。
<comp-b :msg.sync="msg" :arr="arr"></comp-b>
然后在子组件中绑定触发数据变化的事件时,使用$emit
<button @click="$emit('update:msg','hi')">改变msg</button>