子组件

<template>
  <div>
    <span>myvalue: {{ myvalue }}</span>
    <button @click="changeVal('改变了')">子点击</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      myvalue: null
    };
  },
  mounted() {},
  methods: {
    changeVal(val) {
      this.myvalue = val;
      this.$emit("input", val); // 改变父组件v-model 绑定值，实现数据双向绑定
    }
  },
  watch: {
    value: {
      handler(val) {
        this.myvalue = val;
      }
    }
  }
};
</script>

父组件

<template>
  <div>
    <span>msg: {{ msg }}</span>
    <button @click="changeMsg('改变了msg值！')">父点击</button>
    <Child v-model="msg"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  name: "Father",
  components:{
      Child
  },
  data() {
    return {
      msg: "我是父组件原始值！"
    };
  },
  mounted() {},
  methods: {
    changeMsg(msg) {
      this.msg = msg;
    }
  }
};
</script>