扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了Vue使用props、emit实现自定义双向绑定的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的吉州网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
下面我将使用Vue自带的属性实现简单的双向绑定。
下面的例子就是利用了父组件传给子组件（在子组件定义props属性，在父组件的子组件上绑定属性），子组件传给父组件（在子组件使用$emit()属性定义一个触发方法，在父组件上的子组件监听这个事件）。
import Vue from 'vueEsm'
var Com = {
name:'Com',
props:['val'],
template:``,
methods: {
handleInput(e){
this.$emit("input",e.target.value);
}
},
}
new Vue({
el:'#app',
data() {
return {
value:''
}
},
components:{
Com
},
template:`
上面这个例子，在input标签上每次输入时触发原生事件input，在这个事件上绑定了一个handleInput方法，事件每次触发都会执行方法里的$emit属性。该属性里面第一个参数可以定义一个事件名，第二个参数可以传一个参数。这里我们把每次输入的值e.target.value传进去。在父组件的子组件上监听这个事件，定义一个post方法，方法的参数就是传入的数据。然后我们在父组件的data属性里定义一个存储值的变量value。将刚才传入的参数赋给这个变量value。最后在父组件的子组件上绑定一个自定义属性，比如val。将value传给val。在子组件定义一个props属性接受这个val。
这个例子对于理解父组件与子组件传值特别重要。
下方举例说明了我的一个自定义mySelect的实现过程：
{{currentLabel||currentValue}} {{placeholder}}{{item[itemLabel?itemLabel:'name']}}
如上所示，当声明了mySelect组件之后，在项目中实际使用时，就可以如下所示直接使用：
以上就是一个简单的自定义双向绑定组件的实现，包括简单的使用过程。在vue中的自定义组件，关于props的声明时，还是尽量使用官方建议的对象方式，可以声明属性的默认值和数据类型。我这边偷懒了用的是props的字符串数组简写方式，但是这样的话对使用组件时的错误调试不利。所以，尽量不要学我偷懒噢，亲~~~
看完上述内容，是不是对Vue使用props、emit实现自定义双向绑定的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网