VueJs - 绑定bidirectionnaly父数据和子数据

Question

我在Vuejs很新。我在互联网上阅读了文档和一些文章，但我仍然有一个关于组件绑定的问题。

我读到您可以使用props轻松地将数据从父级传递给子级，并且可以使用emit通过回调调用子级中的父级。

我想知道是否有办法直接绑定两个组件的道具。孩子的数据的一次改变将导致父母一方的改变，反之亦然，而不必管理回调功能。

Answer 1

你可能想要考虑的是用于管理状态的Vuex。

正如他们的主页所说：“它作为应用程序中所有组件的[国家]集中存储......”

任何数量的组件都可以监视状态的变化，只要组件发生任何变化，组件就可以“做出反应” - 这意味着组件会根据状态自动更改。

要记住的最重要的事情是状态是不可变的，可以复制，更改和发布新版本，但只有一个事实来源 - 这有助于管理应用程序的状态，因为只有一个来源申请状态的真相。

这可能是获取一些信息的好地方：freecodecamp article

希望有所帮助。

Answer 2

模板

<div id="app">

  <h1>2-way props</h1>
  <p>Test of mechanics required for independent 2-way props in Vue 2</p>
  <p>Updated example using a mixin.</p>

  <section>
    <label>1. App:</label>
    <pre>data: {{ $data }} </pre>
    <ui-input :value.sync="value"></ui-input>
  </section>

</div>

<template id="input">
  <section>
    <label>2. {{ name }}:</label>
    <input v-model="val" @change="onInput">
    <pre>data: {{ $data }}</pre>
  </section>
</template>

脚本

const Field = {

  props:['value'],

  data () {
    return { val:this.value }
  },

  watch: {
    value (value) {
        this.val = value
    }
  },

  methods: {
    onInput() {
        this.$emit('update:value', this.val)
    }
  },

}

Vue.component('ui-input', {

    template:'#input',

  mixins: [Field],

  data () {
    return { name: 'Component' }
    },

})


new Vue({
    data () {
    return {
      value: 'foo'
    }
  }
}).$mount('#app')

请参考小提琴。 https://jsfiddle.net/RiddhiParekh/d60p75Lr/