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

2024-08-30 09:49:16

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>

最新文章

热门文章