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();
                    }
                }
            }
        }
    })