組件的自定義事件

<AA v-on:getAAname="demo"/>

v-on在誰(shuí)身上就是給誰(shuí)綁定事件
給AA這個(gè)組件的實(shí)例對(duì)象VC身上綁定了事件
如果誰(shuí)觸發(fā)了這個(gè)事件，demo就會(huì)被調(diào)用

<template>
    <div>
        <!-- 子傳父 -->
        <!-- 通過(guò)父組件給子組件傳遞函數(shù)類型的props實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù) -->
       <AA :getAAname="getAAname"/>
       <h1>AA：{{aaname}}</h1>
       <!-- 通過(guò)父組件給子組件綁定一個(gè)自定義事件實(shí)現(xiàn)：子給父?jìng)鬟f參數(shù)（@或者v-on） -->
       <BB v-on:eventBB="getBBname"/>
       <h1>BB{{bbname}}</h1>
       <!-- <BB v-on:eventBB.once="getBBname"/> -->
       <!-- 通過(guò)父組件給子組件綁定一個(gè)自定義事件實(shí)現(xiàn)：子給父?jìng)鬟f參數(shù)（使用ref實(shí)現(xiàn) -->
       <CC ref="CC"/>
       <h1>CC{{ccname}}</h1>
    </div>
</template>
    
<script>
    import AA from '@/components/lineComponent/AA.vue';
    import BB from '@/components/lineComponent/BB.vue';
    import CC from '@/components/lineComponent/CC.vue';
    export default {
        components: {AA,BB,CC},
        data() {
            return {
                aaname : '',
                bbname : '',
                ccname : '',
            }
        },
        methods: {
            // 01:AA使用props方法實(shí)現(xiàn)
            getAAname(val) {
                console.log('獲取AA組件的名字',val)
                this.aaname=val
            },
            // 02:BB使用自定義事件實(shí)現(xiàn)
            getBBname(val){
                console.log('獲取BB組件的名字1',val)
                this.bbname=val
            },
            // 注意1：參數(shù)比較多的時(shí)候
            // getBBname1(val1,val2){
            //     console.log('獲取BB組件的名字1',val1,val2)
            // }
            // 注意2：參數(shù)比較多的時(shí)候  更推薦的寫法
            // params是一個(gè)數(shù)組
            // getBBname1(val1,...params){
            //     console.log('獲取BB組件的名字1',val1,params)
            // }      
            
             // 03:CC使用自定義事件實(shí)現(xiàn)
             getCCname(val){
                console.log('獲取CC組件的名字1',val)
                this.ccname=val
            },
            
        },

        // 03:CC
        // 需求是等過(guò)了10秒才去獲取BB中的參數(shù)
        // 更靈活的寫法
        mounted () {
            this.$refs.CC.$on('eventCC',this.getCCname)
            // 注意
            // this.$refs.CC.$on('eventCC',function getCCname(){
            //     console.log(this)   //此處的this指的是 CC組件，而不是getAABB組件
            // })

            
            // setTimeout(()=>{
                //     console.log('可以了');
                // },10000)
            },
            // 只觸發(fā)一次
            // this.$refs.CC.$once('eventCC',this.getCCname)
    }
</script>

AA組件

<template>
    <div>
        <div>
            我是A組件的數(shù)據(jù){{name}}
        </div>
        <button @click="sent">點(diǎn)擊把AA組件的名字傳遞給父組件</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name:"小艾",
            }
        },
        props: {
            getAAname: {},
        },
        methods: {
            sent() {
                this.getAAname(this.name)
            }
        },
    }
</script>

BB

<template>
    <div>
        <div>
           我是B組件的數(shù)據(jù){{name}}
        </div>
        <button @click="sent">點(diǎn)擊把AA組件的名字傳遞給父組件</button>
        <button @click="unbind">解綁</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '小貝',
                age:19
            }
        },
        methods: {
            sent() {
                this.$emit("eventBB",this.name)
            },
            // 注意1：參數(shù)比較多的時(shí)候
            // sent1() {
            //     this.$emit("eventBB",this.name,this.age)
            // }

            // 注意2：參數(shù)很多
            // sent2() {
            //     this.$emit("eventBB",this.name,this.age)
            // }

            unbind(){
                // 解綁一個(gè)自定義事件
                this.$off('eventBB')

                // 解綁多個(gè)自定義事件
                // this.$off(['eventBB','eventBBB']);
                
                // 解綁所有的自定義事件
                // this.$off();  
            }
        },
    }
</script>

CC文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-620316.html

<template>
    <div>
        <div>
           我是B組件的數(shù)據(jù){{name}}
        </div>
        <button @click="sent">點(diǎn)擊把CC組件的名字傳遞給父組件</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '小扣',
                age:19
            }
        },
        methods: {
            sent() {
                this.$emit("eventCC",this.name)
            },
            // 注意1：參數(shù)比較多的時(shí)候
            // sent1() {
            //     this.$emit("eventCC",this.name,this.age)
            // }

            // 注意2：參數(shù)很多
            // sent2() {
            //     this.$emit("eventCC",this.name,this.age)
            // }
        },
    }
</script>

到了這里，關(guān)于VUE，子組件給父組件傳遞參數(shù)，props 自定義屬性，ref的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！