javascript - Vue.js:将数据从一个子组件传递到具有相同父组件的另一个组件？

Question

我有 2 个组件，它们共享一个公共(public)父组件。我希望能够将数据从一个子组件传递到另一个子组件。 (我正在使用 vueJS 2)

Answer 1

通信应由父级组件处理，如下所示:

1. child 1 将数据发送给 parent

this.$emit('myVarChanged', this.myVar);

1. 父级监听最后一个发出的信号，保存新值，并将其传递给第二个子级:

<ChildOneComponent @myVarChanged="updateMyVar" />

data() { return { myVar:null } }

methods: {
     updateMyVar(val){
          this.myVar = val;
     }
}

<ChildTwoComponent :myVar="myVar" />

1. child 2 获得作为 props 的新值:

props: ['myVar']

演示:

const child1 = Vue.component('child1', {
  template: '#child1',
  data() { return { count:0 } },
  methods: {
    updateParent() { this.$emit('myvarchanged', this.count++); }
  }
});

const child2 = Vue.component('child2', {
  template: '#child2',
  props: ['myvar']
});

new Vue({
  el:"#app",
  components: { child1, child2 },
  data() { return { myvar:null } },
  methods: {
    updateMyVar(val) { this.myvar = val; }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="child1">
  <div>
    <h1>Child 1</h1>
    <button @click="updateParent">Click to send to child 2</button>
  </div>
</template>

<template id="child2">
  <div>
    <h1>Child 2</h1>
    <p>Prop from child 1: {{myvar}}</p>
  </div>
</template>

<div id="app">
  <div><child1 @myvarchanged="updateMyVar" /></div>
  <div><child2 :myvar="myvar" /></div>
</div>