除 v-model 外实现双向绑定（子组件、父组件）

双向绑定的需要
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

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: "selectTree",
  props: {
    num: Number,
  },
  methods: {
    addNum() {
      this.$emit("update:num", this.num + 1);
    },
  },
};
</script>

父组件

<template>
  <div id="app">
    <selectTree :num.sync="num" />
  </div>
</template>

<script>
import SelectTree from "./components/SelectTree.vue";

export default {
  name: "App",
  components: {
    SelectTree,
  },
  data() {
    return {
      num: 4,
    };
  },
  mounted() {},
};
</script>