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

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

<template>
    <div>
        child
        <button @click="sendMsg">按钮</button>
    </div>
</template>
<script>
export default {
    name:'Child',
    data(){
       return{
            msg:'子传父'
       }
    },
    methods:{
        sendMsg(){
            this.$emit('onSend',this.msg)
        }
    }
}
</script>

 

<template>
    <div>
        Parent
        <Child @onSend="getMsg" />
        <p>接收的数据：{{msg}}</p>
    </div>
</template>
<script>
import Child from './Child'
export default {
    name:'Parent',
    data(){
        return{
            msg:''
        }
    },
    components:{
        Child,
    },
    methods:{
        getMsg(data){
            //console.log(data)
            this.msg=data
        }
    }
}
</script>

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

  第一层：定义 、传递

 //动态传递
<Child @onSend="getMsg" :xMsg='xMsg' />


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

第二层：传递

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

第三层：接收

<p>接收的数据：{{xMsg}}</p>

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

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

 第一层：

 <button @click="sendMsg">向上传递数据</button>

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

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

第二层：

 <Sunzi v-on='$listeners' />

第三层：

<Child @myEvent='getData' />
<p>接收下层的数据：{{gMsg}}</p>

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