vue组件，自定义v-model方法

 

?

1	<my-component v-model="obj"></my-component>

　　

在使用my-component组件时，为了实现双向绑定。

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Vue.component('my-component', {     props: {         obj: Object,     },     model: {         prop: 'obj',         event: 'change'     },     methods: {         onchange: function() {             this.$emit('change', this.obj);         }     } });

　　

上面代码中

1.props对象中，需要定义一个能够从外部传入的变量，这里我定义了一个obj。这样就可以用下面这行代码进行传递值

?

1	<my-component :obj="obj对象"></my-component>

　　

2.为了能够使用v-model语法糖，我们定义了model对象。model对象包含两个属性，一个是prop，一个是event。prop默认是value，event默认是input，我们这里写model是为了改变默认的东西，使用我们自己定义的变量。写好之后就可以用下面这行代码了。

?

1	<my-component v-model="obj对象"></my-component>

　　

3.虽然可以这么用，但还是不能从子组件传递数据到外部。因为change事件并没有被触发。这个change事件是我自定义的，所以这里需要写一个方法onchange。方法名是次要的，主要的是里面的那行代码。

?

1	this.$emit('change', this.obj);

　　

这行两个参数，第一个是事件名，和model里的event属性的值要一样。第二个参数是改变的值。写第二个变量，才能改变外部的数据，实现双向绑定的功能。

 

文笔不行，没办法表达出清晰的思路，贴上早上翻阅的一些有用的链接，以供参考。

 

参考：

https://jsfiddle.net/yyx990803/58kxs8tj/ 

https://github.com/vuejs/vue/issues/4373

http://lizhihua.me/2016/10/31/vue/component_v-model/