vue|vue组件间（父子、兄弟、跨级组件）的传值 vue|vue

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

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

父组件给子组件传值静态传值
父组件内：

子组件使用props获取：

props:['title'],

子组件渲染在页面内：

{{title}}

最后渲染效果：

文章图片

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

获取方式一致，在data内声明 titleVar: 'element表单'，也可达到传值目的。
传值校验如果你在传值的时候，需要父组件一定给你传递过来值，可以在子组件的props内对传递进来的值进行判断。
将

props:['title'],

改为：

props:{ title: { type: String, required: true} },

【vue|vue组件间（父子、兄弟、跨级组件）的传值】当父组件不传值时，会报错：

文章图片

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

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

import TButton from './components/Button.vue' export default{ components: { TButton } }

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

最后的结果是：

文章图片

非父子组件传值 1.总线bus
创建派发消息的Vue实例：

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

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

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

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

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

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

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

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

参考官网链接https://cn.vuejs.org/v2/api/?#provide-inject
路由传参/值如果路由传递参数也算组件间传值的话，可以参考Vue路由Vue Router创建、传递参数、路由守卫内的参数传递部分内容。
推荐vue组件间通信六种方式（完整版），非目前参考文档，是写完了才看到。