vue組件通信（傳值）

1.父子通信

1.父組件（parent.vue）

<template>
    <div id="parentBig">
        <Child :dmsg="msg"></Child>
    </div>
</template>

<script>
import child from '@/components/child'

export default {
    data(){
        return {
            msg:'要傳遞的信息'
        }
    },
    components:{
        Child
    }
}
</script>
  1. 子組件（child.vue）
<template>
    <div id="childBig">
        <h1>{{dmsg}}</h1>
    </div>
</template>

<script>

export default {
    props: ['dmsg'],// 使用props接收
    data(){
        return {
        }
    },
}
</script>

2.子父通信

1.子組件（child.vue）

<template>
    <div id="childBig">
        <button @click="click1">點(diǎn)擊</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
        }
    },
    methods:{
        click1(){
            // 添加自定義事件
            //參數(shù)1：自定義事件名(string形式) 參數(shù)2：需要傳遞的值
            this.$emit('Dream', 'aaa')
        }
    }
}
</script>

2.父組件（parent.vue）

<template>
    <div id="parentBig">
        <h1>{{title}}</h1>
        <child @Dream="fn"></child>
        <!-- @自定義事件名="調(diào)用的函數(shù)" -->
    </div>
</template>

<script>
import child from '@/components/child'

export default {
    data(){
        return {
            title:'文字ing'
        }
    },
    methods:{
        fn(res){
            console.log('接收自定義事件傳的參數(shù)',res)
            this.title = '已更改為傳來的參數(shù)：'+res
        }
    },
    components:{
        child
    }
}
</script>

3.非父子通信（未完）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容