Vue回炉重造之如何使用props、emit实现自定义双向绑定

ゝ一纸荒年。 2021-08-27 20:10 336阅读 0赞

> 你好，我是**Vam的金豆之路**，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：**前端开发**。我的微信是 **maomin9761**，有什么疑问可以加我哦，自己创建了一个微信技术交流群，可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号：**前端历劫之路**，欢迎关注。

--------------------

> 欢迎阅读本博文，本博文主要讲述【Vue回炉重造之如何使用props、emit实现自定义双向绑定】，文字通俗易懂，如有不妥，还请多多指正。

下面我将使用Vue自带的属性实现简单的双向绑定。

下面的例子就是利用了父组件传给子组件（在子组件定义`props`属性，在父组件的子组件上绑定属性），子组件传给父组件（在子组件使用`$emit()`属性定义一个触发方法，在父组件上的子组件监听这个事件）。

import Vue from 'vueEsm' 
    
    var Com = { 
        name:'Com',
        props:['val'],
        template:`<input type='text' @input='handleInput'/>`,
        methods: { 
            handleInput(e){ 
                this.$emit("input",e.target.value);
            }
        },
    }
    
    new Vue({ 
         el:'#app',
         data() { 
             return { 
                 value:''
             }
         },
         components:{ 
            Com
         },
         template:` <div> <Com @input='post' :val='value'></Com> </div> `,
         methods:{ 
            post(data){ 
                this.value=data;
            }
         }
     })

上面这个例子，在input标签上每次输入时触发原生事件`input`，在这个事件上绑定了一个`handleInput`方法，事件每次触发都会执行方法里的`$emit`属性。该属性里面第一个参数可以定义一个事件名，第二个参数可以传一个参数。这里我们把每次输入的值`e.target.value`传进去。在父组件的子组件上监听这个事件，定义一个`post`方法，方法的参数就是传入的数据。然后我们在父组件的`data`属性里定义一个存储值的变量`value`。将刚才传入的参数赋给这个变量`value`。最后在父组件的子组件上绑定一个自定义属性，比如`val`。将`value`传给`val`。在子组件定义一个`props`属性接受这个`val`。

这个例子对于理解父组件与子组件传值特别重要。

> 谢谢阅读，如果觉得有感触，麻烦帮忙点个赞，关个注吧！