vue 组件双向绑定

Vue组件的双向绑定可以通过v-model指令或者通过prop和自定义事件实现。

使用v-model指令，可以将表单控件或者组件与数据进行双向绑定。例如，在一个input元素上使用v-model指令，可以将输入框的值与Vue实例中的数据进行关联，当输入框的值发生变化时，数据也会相应地更新。示例代码如下：

<div id="app">
  <input type="text" v-model="text">
  {{ text }}
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    text: 'hello world'
  }
});
</script>

另一种实现方式是通过prop和自定义事件实现双向绑定。在父组件中将数据通过prop传递给子组件，并在子组件中通过自定义事件将变化的值传递回来。示例代码如下：
父组件代码：

<template>
  <div>
    <child :data="num" @on-change="num=$event"></child>
    {{num}}
  </div>
</template>
<script>
  import child from './child'
  export default {
    components:{ child },
    data(){
      return {
        num:0
      }
    }
  };
</script>

子组件代码：

<template>
  <div>
    <input type="text" :value="data" @input="change">
  </div>
</template>
<script>
  export default {
    props: {
      data: Number
    },
    methods: {
      change(event) {
        this.$emit("on-change", Number(event.target.value));
      }
    }
  };
</script>

这样，当子组件的输入框的值发生变化时，通过自定义事件将变化的值传递给父组件，父组件接收到值后更新自己的数据，从而实现了双向绑定。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue实现双向绑定的方式](https://blog.csdn.net/weixin_52099241/article/details/130497149)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue组件之间的双向绑定](https://blog.csdn.net/yimawujiang/article/details/87439295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]