父子组件传参

这个是父子传参的一个语法糖，官网上也有推荐，可以去看一下：

 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

一般父子传参都会这么写：

父：

 1 <child-template :modalVisible=”modalVisible”></child-template> 

 

子：

 1 export default {
 2 
 3   props: {
 4 
 5     modalVisible: {
 6 
 7       type: Boolean,
 8 
 9       default: false
10 
11 },
12 
13 },
14 
15 }

 

 

 

子组件可以接收来自父组件的modalVisible。子组件如果要修改modalVisible，可以在自己的data中定义一个变量tempmodalVisible: this.modalVisible。子组件中的modalVisible改变以后，如果想要通知父组件，可以使用$emit去触发定义在父组件中的某个方法。但是有更简单的方法：.sync修饰符。在父组件中使用：

 1 <child-template :modalVisible.sync=”modalVisible”></child-template> 

 

这样，子组件如果想要通知父组件modalVisible发生了变化，可以直接用this.$emit(‘update:modalVisible’,newVal)。newVal就是最新的值。而不用专门在父组件中写一个方法，来监听这个变量是否变化，以及变化后需要做哪些动作。

posted @ 2020-09-30 11:19  熊大熊二李老板  阅读(221)  评论(0)  编辑  收藏  举报