vue组件中的传值方式，父子组件，兄弟组件，隔代组件等。看了官网的一些介绍和文档以及一些学习的文章，然后就记下来。方便后面再次学习或者复习。
原文：www.cnblogs.com/yearshar/p/…
父组件 => 子组件
属性：props
1 2 3 4 5 6 | //childprops:{msg:string}//parent<HelloWorld msg="welcome to your Vue.js App"/> |
特性：$attrs
1 2 3 4 5 6 | //child：并未在props中声明foo,当值传进来时会被归纳到特性中<p>{{$attrs.foo}}</p>//parent<HelloWorld foo="foo"/> |
引用：refs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //parent <HelloWorld ref="hw"/>mounted(){ this.$refs.hw.xx='xxx' //本来子组件中的是一个x现在修改三个x}//child <p>{{xx}}</p> data(){ return{ xx: 'x'}} |
子元素：$child (子元素不保证顺序)
1 | //parent |
1 | <HelloWorld /> |
1 | mounted(){<br>this.$child[0].xx='xxxxx' <br>}<br><br> |
1 2 3 4 5 6 7 8 9 | //child <p>{{xx}}</p> data(){ return{ xx: 'x'}} |
子组件 => 父组件：自定义事件
1 2 3 4 5 6 7 8 | //childthis.$emit('add',good)//parent<Cart @add="cartAdd($event)"><Cart/>ps:事件谁派发谁监听 |
兄弟组件：通过共同祖辈组件
通过共同的祖辈组件搭桥，$parent 或 $root.
1 2 3 4 5 | //brother1this.$parent .$on('foo',handle)//brother2this.$parent.$emit('foo')<br><br><br><br><br>例子： （没有去重）<br>//parent |
1 | <HelloWorld /> |
1 | <HelloWorld /> |
1 | <br>//child<br><br>mounted(){<br>this.$on('foo',()=>{<br> console.log('foo....')<br>})<br>this.$emit('foo')<br><br>} |
祖先和后代之间
由于嵌套层数过多。传递props不切实际，vue提供了provide/inject API完成该任务
provide/inject：能够实现祖先给后代传值(写法类似于props)
1 2 3 4 5 6 7 | //ancestorprovide(){ return {foo:'foo'}}//descendantinject:['foo']<br><br><br><br>例子：<br>//祖先<br><br>export default{<br> provide(){<br> return{<br> something:'something'<br> }<br> }<br>}<br><br>//后代<br>export default{<br> inject:{ //可以直接注入，（响应式）<br> msg:'something'<br> }<br>}<br><br> |
先总结了这些，下篇会总结 事件总线 Bus，vuex 和插槽的用法。这些总结都是学习开课吧中课程进行总结的，有兴趣的可以去看一下开课吧的课程。共勉！
