父子组件之间的通信（二）

最新推荐文章于 2020-11-09 20:50:18 发布

天天脱发也不会秃

最新推荐文章于 2020-11-09 20:50:18 发布

阅读量94

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44015821/article/details/102998712

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上一篇主要使用props属性和emit事件进行父子组件之间的通信，但是这种方法有局限性，父子组件之间通信的内容只能是data，不能整个对象进行传递通信，那么我们子组件怎么调用父组件中的方法呢？

子组件如何调用父组件对象，有两种方式：

1.使用$children，但是该方法有一定的局限性，一般不推荐使用。下面通过代码演示如何调用子组件对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <button @click="btnClick">按钮</button> //在父组件中调用子组件的方法，利用$children
</div>
<template id="cpn">
    <div>
        <p>我是子组件，略略略</p>
    </div>
</template>
<script>
    const cpn = {
        template:"#cpn",
        methods:{
            cpnClick(){
                console.log("我是子组件，略略略");
            }
        }
    }
    const app = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            btnClick(){
                console.log(this.$children[0]);
            }
        },
        components:{
            cpn
        }
    })
</script>
</body>
</html>

结果显示：

注：在使用 $children时需要注意，children事件调用的时所有的子组件的集合，当调用特定子组件时，通过数组对应的下标调用该组件，但是当在该组件数组中插入了其它子组件，该特性子组件的下标发生了变化，则调用的子组件为错误子组件。为了防止这种错误，我们一般使用 $refs，该事件需要配合ref属性一起使用。
2.使用 $refs，在调用特定子组件时，推荐使用该方法，该方法需要在子组件标签使用时，添加一个ref属性，并赋值id。在父组件中用this. $refs.id调用ref为id的子组件。下面通过代码演示如何调用子组件对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn ref="sec"></cpn>
    <cpn></cpn>
    <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
    <div>
        <p>我是子组件，略略略~</p>
    </div>
</template>
<script>
    const cpn = {
        template:"#cpn",
        methods:{
            cpnClick(){
                console.log("我是子组件，略略略~");
            }
        }
    }
    const app = new Vue({
        el:"#app",
        data:{

        },
        components:{
            cpn
        },
        methods:{
            btnClick(){
                console.log(this.$refs.sec);
            }
        }
    })
</script>
</body>
</html>

结果显示：
在这里插入图片描述

天天脱发也不会秃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子组件之间的通信（二）

上一篇主要使用props属性和emit事件进行父子组件之间的通信，但是这种方法有局限性，父子组件之间通信的内容只能是data，不能整个对象进行传递通信，那么我们子组件怎么调用父组件中的方法呢？子组件如何调用父组件对象，有两种方式：1.使用$children，但是该方法有一定的局限性，一般不推荐使用。下面通过代码演示如何调用父组件对象。<!DOCTYPE html><htm...
复制链接

扫一扫