vue2 v-io 父子組件雙向綁定多個數據

安裝 vue-io-directive

可以減少使用 emit，組件自帶的v-model好像也只能設置一個

npm i vue-io-directive

使用

import Vue from 'vue'
import { VueIoDirective } from "vue-io-directive";

Vue.directive("io", VueIoDirective);

父組件

<template>
  <div id="app">
    <input type="text" v-model="data.name" />
    <HelloWorld v-io:child.name="data.name"></HelloWorld>
  </div>
</template>

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

export default {
  name: "App",
  data() {
    return {
      data: {
        name: ""
      }
    };
  },
  components: {
    HelloWorld
  }
};
</script>

子組件

<template>
  <div class="hello">
    <input type="text" v-model="child.name" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      child: {
        name: ""
      }
    };
  },
  watch: {
    "child.name": function(val) {
      console.log(val);
    }
  }
};
</script>