废话不多说直接上代码!
为什么不能在子组件内直接赋值 1.控制台会报错 2.赋值后父类同步不了数据 ;
/ 子组件中
<template>
<div>
<span>{{Arr}}</span>
<span>{{child}}</span>
<input type="button" value="点击触发" @click="send">
</div>
</template>
<script>
export default {
/*获取传值
* 官方文档
* https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%80%E6%9C%89-property
* String Number Boolean Array Object Date Function Symbol
* */
props: {
Arr: Array,// 参数传递 接收 数组
},
data () {
return {
child: '我是子组件的数据'
}
},
methods: {
send () {
// 如果传多个值就用逗号隔开 a, b, c
this.$emit('fromChild', this.child)
//【这里调用的是父类函数】 如果需要父子同步数据的情况下可以直接
this.$emit('SetArr', ['1','2'])
}
}
}
</script>
// 父组件
<template>
<div>
<span>{{name}}</span>
// 在父组件中监听 fromChild事件 这里还可以传递 函数 直接到子组件
<child @fromChild="onFromChild" :Arr="Arr" ></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: '',
Arr:[],//参数传递 数组
}
},
methods: {
onFromChild: function (data) {
// data就是子组件传过来的值
// 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
this.name = data
}
//接收传递数据重置 数组
SetArr(arr){
this.Arr = arr;
},
}
}
</script>