YanTianFeng的知识库

Want Coding

Want Reading

文章 89

访问 18940

评论 2

头像

YanTianFeng

发私信

文章 89
访问 18940
评论 2
Technology and Code
返回顶部

Knowledge  自定义组件(父子组件)的双向数据绑定

标签   v-model  

  ( 28 )       ( 0 )


自定义组件(父子组件)的双向数据绑定

写法 1 :

①父组件用法:

②子组件写法:

// 点击该按钮触发父子组件的数据同步

 
// 接收父组件传递的value值
// 注意,这种实现方法,这里只能使用value属性名
props: {            
    value: {                
        type: Boolean,                
        default: false            
    }        
},
methods: {            
    confirm () {                
        // 双向数据绑定父组件:value对应的值 
        // 通过$emit触发父组件input事件,第二个参数为传递给父组件的值,这里传递了一个false值 
        // 可以理解为最上面展示的@input="msg = $event.target.value"这个事件
        // 即触发父组件的input事件,并将传递的值‘false’赋值给msg             
        this.$emit('input', false)            
    }        
}

以上这种方式实现的父子组件的 v - model 通信,虽可行,但限制了我们必须 popos 接收的属性名为 value 和 emit 触发的必须为 input ,这样就容易有冲突,特别是在表单里面。所以,为了更优雅的使用 v - model 通信而解决冲突的问题,我们可以通过在子组件中使用 model 选项

写法 2 :

父组件写法:

子组件写法:


 
// model选项用来避免冲突
// prop属性用来指定props属性中的哪个值用来接收父组件v-model传递的值
// 例如这里用props中的show来接收父组件传递的v-model值
// event:为了方便理解,可以简单理解为父组件@input的别名,从而避免冲突
// event的值对应了你emit时要提交的事件名,你可以叫aa,也可以叫bb,但是要命名要有意义哦!!!
model: {            
    prop: 'show',            
    event: 'changed'        
},
props: {
    // 由于model选项中的prop属性指定了,所以show接收的是父组件v-model传递的值            
    show: {                
        type: Boolean,                
        default: false            
    }        
},        
methods: {            
    confirm () {                
        // 双向数据绑定父组件传递的值
        // 第一个参数,对应model选项的event的值,你可以叫aa,bbb,ccc,起名随你 
        this.$emit('changed', false)            
    }        
}