Vue中v-model实现父子组件的双向绑定

solaaa

如何在自定义组件使用中实现双向绑定？

举例：

父组件

[JavaScript] 纯文本查看 复制代码

<template>
  <div class="home">
    <Innput v-model="vvv"></Innput> //自定义组件，使用v-model实现双向绑定
    <div>子组件{{vvv}}</div> //子组件改变，父组件对应跟着改变
  </div>
</template>

<script>
import Innput from '../components/input.vue';
export default {
  name: 'Home',
  components: {
    Innput
  },
  data() {
    return {
      vvv: 123
    }
  }
}
</script>

子组件

[HTML] 纯文本查看 复制代码

<template>
  <div>
      <input type="text" v-model="newValue"> //绑定计算属性
  </div>
</template>

<script>
export default {
    props: {
        value: {
                type: Number,
                default: () => 0
                }
    },
    computed: {
        newValue:{
            get() {
                return Number(this.value)
            },
            set(val) {
                this.$emit('input', Number(val))
            }
        }
    }
}
</script>

大侠在路上

授人以鱼不如授人以渔。

前往这个链接：https://www.bilibili.com/video/BV15741177Eh?p=64

三集的讲解，两种实现方案。

大Z.

官网文档：在组件上使用v-model
https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model