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
        }