vue组件间（父子、兄弟、跨级组件）通信传值_两个父组件可以接收同一个子组件的传值吗

大体可以分为这几种情况：

• 父子组件传值
• 子父组件传值
• 兄弟组件传值（不相干的两个组件）
• 跨组件传值

父组件给子组件传值

静态传值

父组件内：

<form-test title="element表单"></form-test>
1

子组件使用props获取：

props:['title'],
1

子组件渲染在页面内：

<h3>{{title}}</h3>
1

最后渲染效果：

动态传值

子组件内的东西与上方的一致，修改父组件内的组件：

<form-test :title="titleVar"></form-test>
1

获取方式一致，在data内声明 titleVar: 'element表单'，也可达到传值目的。

传值校验

如果你在传值的时候，需要父组件一定给你传递过来值，可以在子组件的props内对传递进来的值进行判断。
将

props:['title'],
1

改为：

props:{
            title: { type: String, required: true}
        },
1
2
3

当父组件不传值时，会报错：

子组件给父组件传值

子组件给父组件是通过事件传值的，派发自定义事件，父组件监听这个自定义事件。
在子组件内需要使用$emit触发事件test，将后面的参数
传递给父组件。
子组件Button.vue的内容：

<template>
    <div>
        <button @click="handleClick">测试</button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleClick() {
                this.$emit('test',{msg: 'hello'})
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

父组件内容
父组件需要导入子组件Button.vue，添加下方内容：

import TButton from './components/Button.vue'
export default{
	components: {
		TButton
	}
}
1
2
3
4
5
6

父组件监听传递过来的事件test，使用事件handleClick来获取，obj就是传递出来的那个对象。
最后，父组件的内容：

<template>
  <div id="app">
    <t-button @test="handleClick"></t-button>
  </div>
</template>

<script>
import TButton from './components/Button.vue'
export default {
  components: {
    TButton
  },
  methods: {
    handleClick(obj){
      console.log(obj);
    }
  },
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

最后的结果是：

非父子组件传值

1.总线bus

创建派发消息的Vue实例：

Vue.prototype.$bus=  new Vue();
1

父组件内：
在相应发生事件位置，添加点击事件addGood()事件，

methods: {
    addGood() {
      this.$bus.$emit('addCart', good);  //第一个参数为事件名称，第二个参为需要派发的数据
    }
  },
1
2
3
4
5

子组件通过this.$bus.$on来接受这个动作，得到了需要添加的数据，然后将这些数据渲染或存储等。
子组件内对此过程的全部操作：

created(){
            this.$bus.$on('addCart',good => {
            	//dosomthing  对传递过来的参数的处理动作 
            })
        },
1
2
3
4
5

2.Vuex

适用于较大的项目
详细请查看文档

跨组件传值

provide/inject

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：
    一个字符串数组，或
    一个对象，对象的 key 是本地的绑定名，value 是：
        在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
        一个对象，该对象的：
            from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
            default property 是降级情况下使用的 value
1
2
3
4
5
6
7

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参考官网链接https://cn.vuejs.org/v2/api/?#provide-inject

路由传参/值

如果路由传递参数也算组件间传值的话，可以参考Vue路由Vue Router创建、传递参数、路由守卫内的参数传递部分内容。

推荐vue组件间通信六种方式（完整版），非目前参考文档，是写完了才看到。