vue v-io 父子组件双向绑定多个数据

• vue-io-directive

可以减少使用emit，组件自带的v-model好像也只能设置一个

1. 安装

npm i vue-io-directive

1. 使用

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

Vue.directive("io", VueIoDirective);

1. 父组件

<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>

1. 子组件

<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>