VueJs - связывание двунаправленных родительских и дочерних данных - PullRequest
0 голосов
/ 15 февраля 2019

Я довольно новый в Вуэйсе.Я прочитал документацию и несколько статей в Интернете, но у меня все еще есть вопрос о связывании компонентов.

Я прочитал, что вы можете легко передавать данные от родителя ребенку с помощью реквизита и что вы можете вызвать родителя от ребенка с помощью своего рода обратного вызова с emit.

IИнтересно, есть ли способ напрямую связать реквизит из обоих компонентов.Одно изменение данных ребенка приведет к изменению родительских данных, и наоборот, без необходимости управлять функциями обратного вызова.

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Возможно, вы захотите рассмотреть Vuex , который используется для управления состоянием.

Как говорит их домашняя страница: " Он служит централизованным хранилищем [состояния] длявсе компоненты в приложении ..."

Любое количество компонентов может наблюдать за изменениями состояния, и компонент может« реагировать »на любые изменения этого состояния, то есть компонентавтоматически изменяется в соответствии с состоянием.

Самое важное, что следует помнить, это то, что состояние является неизменным, его можно копировать, изменять и публиковать новую версию, но существует только один источник правды - это помогает в управлениисостояние вашего приложения, потому что существует только один источник правды для состояния приложения.

Это может быть хорошим местом для получения некоторой информации: freecodecamp article

Надеюсь, что помогает.

0 голосов
/ 15 февраля 2019

Шаблон

<code><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 }} 
data: {{ $data }}

Сценарий

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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...