vue自定义组件双向绑定

要实现的功能：自定义一个子组件，在父组件中传值，子组件中变化，子组件中通过props接受，子组件改变这个值时（$emit）父组件不必通过 @on来监听接受变化的值

父组件中的代码

  <Foot v-model:keyword="word"/>

 <hr />
  {{word}}

子组件中的代码

 <button @click="changeModel">更改</button>



<script>

export default {
  name: "Foot",
  props:["keyword"],
  methods: {
    changeModel(){
        this.$emit("update:keyword","是打发斯蒂芬阿斯蒂芬")
    },
  },
};
</script>

还有一种法是v-model="" 语法糖，和这个原理差不多，但是我更喜欢这个，因为这个子组件中的props是自定义的