实现自定义组件双向绑定

文件结构,就是自带的模板

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" v-model="parent"/>
    <p>{{ parent }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from ‘@/components/HelloWorld.vue‘;
import {Component, Vue} from ‘vue-property-decorator‘;//引入装饰器
@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  parent = ‘‘;
}
</script>

子组件

<template>
  <div class="hello">
    <p><input :value="value" @input="update($event.target.value)" /></p>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Model, Vue } from ‘vue-property-decorator‘;

@Component
export default class HelloWorld extends Vue {
  @Model(‘change‘) value:string = ‘‘;
  
  @Emit(‘change‘)
  update(val: any) {
    return val;
  }
  change(val: any) {
    return val;
  }
}

实现自定义组件双向绑定

原文：https://www.cnblogs.com/idrinkmilk/p/12750885.html