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实现
双向绑定的方式](htt
ps://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组件之间的
双向绑定](htt
ps://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 ]
prop双向绑定
最低0.47元/天 解锁文章
3338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
