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

Question

我有 2 个组件，它们共享一个共同的父组件。我希望能够将数据从一个子组件传递到另一个子组件。（我使用的是vueJS 2）

Answer 1

parent组件应按如下方式处理通信：

1. 子进程 1 将数据发送给父进程

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

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

<ChildOneComponent @myVarChanged="updateMyVar" />

data() { return { myVar:null } }

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

<ChildTwoComponent :myVar="myVar" />

3. 子级 2 获得的新值如下props：

props: ['myVar']

演示：

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

<ChildOneComponent @myVarChanged="updateMyVar" />