欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)

 更新時(shí)間：2021年08月16日 17:29:21   作者：I''m Mr.C  
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)，全文通過舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)

Vue父組件調(diào)用子組件的函數(shù)

父組件通過事件調(diào)用子組件的函數(shù)。例如父組件通過 點(diǎn)擊事件 讓子組件發(fā)請(qǐng)求。

文章中的項(xiàng)目已經(jīng)通過腳手架去創(chuàng)建。

DEMO:

Father.js
<template>
    <div>
        <div>
            <son ref="son"></son>
            <input type="button" value="點(diǎn)擊" @click="useSonFun">
        </div>  
    </div>
</template>

<script>
import son from './son'
export default {
    components:{
        son
    },
    data(){
        return{
            
        }
    },
    methods: {
        useSonFun(){
            this.$refs.son.say();//給 子組件 一個(gè)ref,通過ref去調(diào)用子組件中的函數(shù)
        }
    },
}
</script>

Son.js
<template>
    <div>
        <h1>SON</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    methods:{
        say(){//需要父組件去調(diào)用的子組件函數(shù)
            console.log("SON COMPONENT");
        }
    },
}
</script>

效果圖

在這里插入圖片描述

父組件調(diào)用子組件函數(shù)，可以使用在父組件通過點(diǎn)擊發(fā)請(qǐng)求，根據(jù)點(diǎn)擊事件，子組件也發(fā)請(qǐng)求?？梢詤^(qū)別于 父組件點(diǎn)擊發(fā)請(qǐng)求，獲取到數(shù)據(jù)，再把數(shù)據(jù)通過組件傳值的方式傳給子組件。

Tips:

Father.js:
this.$refs.son.say(括號(hào)內(nèi)可以將父組件的數(shù)據(jù)傳到子組件);
Son.js:
say(接收父組件傳到子組件的數(shù)據(jù)){
	//對(duì)數(shù)據(jù)的使用
}

到此這篇關(guān)于java設(shè)計(jì)模式之觀察者模式的介紹及使用的文章就介紹到這了,更多相關(guān)觀察者模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論