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

 

上一篇:VueJS 基础部分-组件化(2)


下一篇:十、Vue组件化开发