自定义组件实现双向数据绑定自定义组件实现双向数据绑定

vue自定义组件双向数据绑定：
定义组件component:
子组件：
html

js

export default {
name: "component",
props:['value'],
methods:{
handleInput (e) {
this.$emit('input',e.target.value)
}
}
}
父组件：
html:

js:

import InputText from './component'
export default {
name: 'HelloWorld',
components:{
InputText
},
data () {
return {
value: '113'
}
}
}

在这里子组件通过方法handleInput发射事件input,通过props接收父组件的传递给子组件的value值，父组件负责监听子组件的发射的事件input,得到的值value是第一个参数
因此可以可以写成v-model="value",如下：
父组件

子组件：

这样就实现了自定义组件的双向数据绑定
也可以在子组件中加入model对象定义从父组件获取的数据及发射的事件方法，如下：
html:

js:

export default {
name: "component",
model :{
prop:'value1',
event:'change'
},
props:['value1'],

methods:{
handleInput (e) {
this.$emit('change',e.target.value)
}
}
}
在这里model对象定义父组件获取的数据value和向父组件监听的时间change