Vue父子組件的相互調用方法與參數

父組件調用子組件的方法

方法一：$children，根據下標獲取子組件（不推薦）

<!--父組件模板-->
<div id="app">
    <cpn></cpn>
    <cpn2></cpn2>
    <button @click="btn">點擊</button>
</div>

<!--子組件模板-->
<template id="cpn">
    <div>cpn子組件</div>
</template>
<template id="cpn2">
    <div>cpn2子組件</div>
</template>

使用$children獲取子組件的方法與屬性

    const cpn = {
        template: "#cpn",
        methods:{
            cpnBtn() {
                console.log("這個是cpn的cpnBtn方法");
            }
        }
    };
    const cpn2 = {
        template: "#cpn2",
        methods:{
            cpn2Btn() {
                console.log("cpn2的cpn2Btn方法");
            }
        }
    };

    const vue = new Vue({
        el:"#app",
        data() {
            return {
                name:"lhs"
            };
        },
        methods:{
            btn() {
                //父組件模板里，獲取第一個子組件（cpn）的方法
                this.$children[0].cpnBtn();
                //父組件模板里，獲取第二個子組件（cpn2）的方法
                this.$children[1].cpn2Btn()
            }
        },
        components:{
            cpn,
            cpn2
        }
    })

$children之所以不推薦使用，父組件模板里的子組件調換順序，$children下標的順序也要換，復用性不強

<!--父組件模板-->
<div id="app">
    <cpn2></cpn2>
    <cpn></cpn>
    <button @click="btn">點擊</button>
</div>

 //父組件模板里，獲取第2個子組件（cpn）的方法
this.$children[1].cpnBtn();
//父組件模板里，獲取第1個子組件（cpn2）的方法
this.$children[0].cpn2Btn()

方法二：$refs（推薦）

簡單起見，v-el 和 v-ref 合並為一個 ref attribute ，可以在組件實例中通過 $refs 來調用。這意味着 v-el:my-element 將寫成這樣：ref="myElement"，v-ref:my-component 變成了這樣：ref="myComponent"。綁定在一般元素上時，ref 指 DOM 元素，綁定在組件上時，ref 為一組件實例。

<!--父組件模板-->
<div id="app">
    <cpn2></cpn2>
    <!--通過ref獲取到整個組件（component）的對象。-->
    <cpn ref="cpa"></cpn>
    <button @click="btn">點擊</button>
</div>

    const vue = new Vue({
        el:"#app",
        data() {
            return {
                name:"lhs"
            };
        },
        methods:{
            btn() {
                //不需下標，根據ref定位
                this.$refs.cpa.cpnBtn();
            }
        },
        components:{
            cpn,
            cpn2
        }
    })    

 

 

子組件調用父組件的方法

方法一：$parent，返回上一層調用組件

<!--父組件模板-->
<div id="app">
    <cpn></cpn>
</div>

<!--子組件模板-->
<template id="cpn">
    <div>
        <h3>cpn子組件</h3>
        <button @click="cpnBtn">點擊</button>
    </div>
</template>

    const vue = new Vue({
        el:"#app",
        data() {
            return {
                name:"lhs"
            };
        },
        methods:{
            btn() {
                console.log("父組件的btn方法");
            }
        },
        components:{
            cpn:{
                template: "#cpn",
                methods:{
                    cpnBtn() {
                        //返回上一層調用組件，如果子組件(cpn)在嵌套子組件(cpn2)，當前(cpn2)就會調用cpn而不是調用根父組件
                        this.$parent.btn();
                    }
                }
            }
        }
    })

方法二：$root，調用根父組件

    const vue = new Vue({
        el:"#app",
        data() {
            return {
                name:"lhs"
            };
        },
        methods:{
            btn() {
                console.log("父組件的btn方法");
            }
        },
        components:{
            cpn:{
                template: "#cpn",
                methods:{
                    cpnBtn() {
                        //當前子組件就算嵌套，也會調用根父組件
                        this.$root.btn();
                    }
                }
            }
        }
    })