Question

我对Vuejs很陌生。我在Internet上阅读了文档和几篇文章，但是我仍然对组件绑定有疑问。

我了解到您可以使用道具轻松地将数据从父级传递给孩子，并且可以使用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/

VueJs-双向绑定父级和子级数据

2 个答案: