vue组件通信$attrs、$listeners解决组件嵌套多层关系

vue组件通信$attrs、$listeners解决组件嵌套多层关系

1.系列为父组件给子组件传递数据
2.系列为子组件给父组件传递数据

	    <script>
        Vue.component('C',{
     
            data(){
     
                return{
     

                }
            },
            // 1.3、C组件通过$attrs.message获取数据
            // 2.2、v-on：绑定点击事件
            template:`
                

                    
{
      {$attrs.message}}
                
            `,
            methods:{
     
                // 2.1、C组件通过vm.$emit('event',arg)绑定自定义事件      子组件传递数据给父组件
                diverData:function(){
     
                    alert(11);
                    this.$emit('getData','子组件C传给父组件的数据');
                }
            }
        });
        Vue.component('B',{
     
            data(){
     
                return{
     

                }
            },
            // 2.3、在A、B组件绑定$listeners传递数据给父组件
            template:`
                

                    
                
            `,
            methods:{
     

            }
        });
        Vue.component('A',{
     
            data(){
     
                return{
     

                }
            },
            template:`
                

                    
                
            `,
            methods:{
     

            }
        });
        Vue.component('A',{
     
            data(){
     
                return{
     

                }
            },
            // 1.2、通过组件A、B绑定$attrs传递数据给C
            template:`
                

                    
                
            `,
            methods:{
     

            }
        });
        var App = {
     
            data(){
     
                return{
     
                    data:'我是父组件',
                    message:'父组件传给子组件的数据'
                }
            },
            // 1.1、通过v-bind绑定message    父组件传递数据到子组件
            template:`
                

                    
{
      {data}}
                    
                    

                
            `,
            methods:{
     
                //2.4、对绑定事件进行处理
                getData:function(val){
     
                    console.log(val);
                }
            }
        };
        new Vue({
     
            el:'#app',
            data(){
     
                return{
     

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