vue组建父子多层通信

父-->子 第一层通过自定义属性传值，之后通过v-bind=""$attrs"传递给子级

子-->父 第一层通过$emit传值，之后通过v-on="$listeners"传递给父级

     <script type="text/javascript">
           // c组件
            Vue.component('C',{
                data(){
                    return{
                        cData:'这是孩儿我挣的钱上交'
                    }
                },
                //$attrs相当于拿到了B父组件传递的值，
                template: `<div @click="cClickHandler">
                C组件拿到了：{{$attrs.msg}}
                </div>`,
                methods:{
                    cClickHandler(){
                        this.$emit('getCData',this.cData);
                    }
                }
            })

            // B组件
            Vue.component('B',{
                data() {
                    return {
                
                    }
                },
                // $attrs相当于拿到了A父组件传递的值
                template: `<div>
                                B组件拿到了：<span>{{$attrs.msg}}</span>
                                <C v-bind="$attrs" v-on="$listeners"></C>
                            </div>`
            })

            // A组件
            Vue.component('A',{
                // $attrs相当于拿到了父组件传递的值
                template: `<div>
                                A组件拿到了：<span>{{$attrs.msg}}</span>
                                <B v-bind="$attrs" v-on="$listeners"></B>
                            </div>`,
                created(){
                    console.log(this.$attrs);//我是父组件传递过来的值
                }
            })
            // 父组件绑定自定义属性msg并且传递值msg
            var App = {
                data() {
                    return {
                        msg: 'hello，我是老家长给你们的零花钱',
                        title:''
                    }
                },
                template: `<div class="app">
                    <div>父组件拿到了：{{title}}</div>
                    <A :msg="msg" @getCData="getCData"></A>
                </div>`,
                methods: {
                    getCData(val) {
                        // 执行C组件的触发函数
                        this.title = val;
                    }
                }
            }
            new Vue({
                el: '#app',
                data() {
                    return {

                    }
                },
                components: {
                    App
                },
                template: '<App/>'
            })
     </script>

作者：匆匆那年__
链接：https://www.jianshu.com/p/3aee5f7f637c
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。