双向绑定的须要
在有些状况下，咱们可能须要对一个 prop 进行“双向绑定”。可怜的是，真正的双向绑定会带来保护上的问题，因为子组件能够变更父组件，且在父组件和子组件两侧都没有显著的变更起源。以下就是在vue2和vue3中如何实现双向绑定的实例
vue2中双向绑定的实现(2.3.0+)
在vue2中实现双向绑定，次要是在在父组件中应用 :属性名.sync修饰符和在子组件中this.emit('update:属性名'，属性值)形式去实现
子组件
<template> <div class="hello"> <div> {{ num }} </div> <button @click="addNum"></button> </div></template><script>export default { name: "TwoWayBinding", props: { num: Number, }, methods: { addNum() { this.$emit("update:num", this.num + 1); }, },};</script>父页面
<template> <div id="app"> <TwoWayBinding :num.sync="num" /> </div></template><script>import TwoWayBinding from "./components/TwoWayBinding.vue";export default { name: "App", components: { TwoWayBinding, }, data() { return { num: 4, }; }, mounted() {},};</script>vue3.2中双向绑定的实现
在vue3中实现双向绑定，次要是在在父组件中应用v-model:属性名和在子组件中emit('update:属性名'，属性值)的形式去实现
子组件
<template> <div>{{num}}</div> <button @click="addNum">加1</button></template><script setup>import {defineProps,defineEmits} from 'vue'const props = defineProps({ num:Number})const emit = defineEmits('update:num')const addNum = () =>{ emit('update:num',props.num+1)}</script>父页面
<template> <div id="app"> <two-way-binding-vue v-model:num="num"></two-way-binding-vue> </div></template><script setup>import { ref } from 'vue';import TwoWayBindingVue from './components/TwoWayBinding.vue';const num = ref(4)</script>