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

solaaa 发表于 2021-8-7 11:01

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

举例：

父组件
<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>

子组件
<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>

大侠在路上 发表于 2021-8-7 14:02

授人以鱼不如授人以渔。

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

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

大Z. 发表于 2021-8-7 14:14

本帖最后由大Z. 于 2021-8-7 14:16 编辑

官网文档：在组件上使用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

页: [1]

吾爱破解 - 52pojie.cn's Archiver

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