父元件呼叫子元件的函式

父元件通過事件呼叫子元件的函式。例如父元件通過 點選事件 讓子元件發請求。

文章中的專案已經通過腳手架去建立。

DEMO:

Father.
<template>
    <div>
        <div>
            <son ref="son"></son>
            <input type="button" value="點選" @click="useSonFun">
        </div>  
    </div>
</template>

<script>
import son from './son'
export default {
    components:{
        son
    },data(){
        return{
            
        }
    },eQoosdm
 
  methods: {
        useSonFun(){
            this.$refs.son.say();//給 子元件 一個ref,通過ref去呼叫子元件中的函式
        }
    },}
</script>

Son.js
&eQoosdmlt;template>
    <div>
        <h1>SON</h1>
www.cppcns.com    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },methods:
 
{
        say(){//需要父元件去呼叫的子元件函式
            console.log("SON COMPONENT");
        }
    },}
</script>

效果圖

父元件呼叫子元件函式，可以使用在父元件通過點擊發請求，根據點選事件，子元件也發請求。可以區別於 父元件點擊發請求，獲取到資料，再把資料通過元件傳值的方式傳給子元件。

Tips:

Father.js:
this.$refs.son.say(括號內可以將父元件的資料傳到子元件);
Son.js:
say(接收父元件傳到子元件的資料){
	//對資料的使用
}

到此這篇關於設計模式之觀www.cppcns.com