Vue 自定义组件v-model父子组件传值双向绑定

Vue 自定义组件v-model父子组件传值双向绑定

之前自己写过一个自定义组件，父组件使用 v-model 进行双向数据绑定的，写了好几次，当时明白，但是过了几天又忘了，写一下吧。

日常我们使用v-model

<div id="app">
    <p>{{message}}</p>
    <input type="text" v-model='message'>
</div>
<script>
    var vueApp = new Vue({
        el:'#app',
        data:{
            message:"我其实是一个语法糖"
        }
    })
</script>

去除它的语法糖

<div id="app">
    <p>{{message}}</p>
    <input type="text" v-bind:value='message' @input='message = $event.target.value'>
</div>
<script>
    var vueApp = new Vue({
        el: '#app',
        data: {
            message: "我其实是一个语法糖"
        }
    })
</script>

自定义组件如何使用v-model

vue里面自定义组件v-model的语法糖：

<custom v-model='something'></custom>

约等于

<custom :value="something" @input="value => { something = value }"></custom>

用 v-model 语法糖来向父组件传递值。

父组件使用v-model与子组件表单实现—双向绑定。

在子组件里面，首先在props里面接收一下value值，然后初始化到newValue里面，然后监听newValue值变化，变化后发射事件到父组件

watch:{
  newValue(){
    this.$emit('input', this.newValue)
  }
}

还有一篇：https://blog.csdn.net/weixin_42776111/article/details/108979101