关于javascript:vue中如何实现双向绑定

双向绑定的须要

在有些状况下，咱们可能须要对一个 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>