v-model双向绑定组件通信

大可&不必2024-10-21 15:06

给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件

javascript 复制代码

<template>
<Child v-model="lastName" v-if="true"></Child>
<p >{{lastName}}</p>
</template>
<script>
import Child from "./components/child.vue"
data() {
    return {
      lastName: '我是父组件'
    };
  },
</script>

子组件

javascript 复制代码

<template>
    <div>
        我是child组件
        <!-- <input type="text" :value="lastName" @input="$emit('update', $event.target.value)"> -->
        <input type="text" v-model="input">
    </div>
</template>
<script>
export default {
    name: 'Child',
    props: ['lastName'],
    model:{
        prop: 'lastName',
        event: 'update'
    },
    data() {
        return {
          // value: this.lastName,
        }
    },
    computed: {
        input: {
            get() {
                return this.lastName;
            },
            set(val) {
                this.$emit('update', val);    // 触发
            }
        }
    },
    mounted() {
       
    },
    methods: {
   
    },
    
}
</script>