今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。
众所周知，v-model是给input绑定，方便对表单的双向绑定。
其实，v-model是个语法糖，具体案例如下所示。文章来源：https://www.toymoban.com/news/detail-645196.html
<input v-model="inputValue">
相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
在自定义组件中
<my-component v-model="inputValue"></my-component>
相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]">
</my-component>
这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，
所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。
this.$emit('input', value)//这个是在子组件中调用的
其实通过this.$emit('input', value)已经实现了子传父
我们今天所说的是自定义组件实时子传父，请继续看下面代码：文章来源地址https://www.toymoban.com/news/detail-645196.html
在父组件中调用子组件
<my-component v-model="inputValue"></my-component>
子组件
watch: {
// sonVal是子组件的一个变量值，当他变化的时候就会触发handler将新值传给父组件的inputValue
sonVal: {
handler (newVal, oldVal) {
this.$emit('input', newVal)
},
deep: true,
}
}
到了这里，关于vue子传父的一种新方法：this.$emit(‘input‘, value)可实现实时向父组件传值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
