自定义组件使用v-modle

父组件

<template>
<div class="parent">
  <p>我是父组件, 对子组件说： {{data}}</p>
  <Child v-model="data"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      data: '周末去你外婆家'
    };
  },
  components: {
    Child
  }
}
</script>

子组件 使用了model选项的 prop的值可以随意命名 event的值也可以随意命名

<template>
<div class="child">data
  <p>我是子组件，父组件我说： {{data}}</p>
  <a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    data: String
  },
  model: {
    prop: 'data',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '好的');
    }
  }
}
</script>

还有一种不使用model选项的  如果以这样的格式去写的话还想页面展示出来，props必须是value  自定义事件名必须是input

<template>
<div class="child">
  <p>我是子组件，父组件对我说： {{value}}</p>
  <a href="javascript:;"  @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '好的');
    }
  }
}
</script>