Vue 学习笔记：数据传递（三）

1、同级之间的数据传递：this.$emit("自定义事件"，"发送的数据")；

 

2、向下层传递数据：v-$attrs：

  第一层：定义 、传递

 //动态传递



//data里面定义数据
 data(){
        return{
            xMsg:'我是Parent的数据'
        }
 }

第二层：传递

 //只需要给下一层绑定v-bind=$attrs

第三层：接收

接收的数据：{{xMsg}}

//接收并渲染到界面
 props:["xMsg"]

3、向上层传递数据：v-on:$listeners；

 第一层：

 向上传递数据

 data(){
       return{
          cMsg:'我是Sunzi的数据'
       }
    },

 methods:{
       sendMsg(){
           this.$emit('myEvent',this.cMsg)
       }
 }

第二层：

第三层：

接收下层的数据：{{gMsg}}

    data(){
        return{
            gMsg:''
        }
    },
    methods:{
        getData(data){
            this.gMsg=data
        }