vue组件通信的 $children 、$refs、$parent、provide/inject的使用

最新推荐文章于 2023-01-20 19:37:12 发布

鸭绒

最新推荐文章于 2023-01-20 19:37:12 发布

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107783724

版权

文章目录

1. 前言

我来给你们添蜜啦
在这里插入图片描述

之前我们介绍了父传子使用props属性，子传父使用$emit发射自定义函数实现父子组件通信。那么我们有什么方法可以直接在父组件操作子组件的数据或函数、子组件操作父组件的数据或函数吗？下面就通过 $children 、$refs、$parent实现。

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。

父组件访问子组件：使用$children或$refs。
子组件访问父组件：使用$parent。

2. 父组件访问子组件

2.1 $children

this.$children是一个数组类型，它包含所有子组件对象。

实例：在父组件通过this.$children来获取子组件定义的图片的imgSrc地址：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue_learn</title>
    <style></style>
  </head>
  <body>
    <template id="component">
      <div>
        <img :src="imgSrc" />
      </div>
    </template>

    <div class="container" @click="getChild">
      <!-- 使用组件 -->
      <my-component></my-component>
    </div>

    <script src="./vue.js"></script>
    <script>
      // vue实例1
      var app1 = new Vue({
    
        el: ".container",
        methods: {
    
          getChild: function () {
    
            console.log("子组件数据：", this.$children[0].imgSrc);
          },
        },


        components: {
    
          // 在vue实例注册组件，形成父子关系，局部组件
          "my-component": {
    
            template: "#component",
            data: function () {
    
              return {
    
                imgSrc:
                  "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=272736508,2842806735&fm=26&gp=0.jpg",
              };
            },
          },
        },
      })

最低0.47元/天解锁文章

鸭绒

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
vue组件通信的 $children 、$refs、$parent、provide/inject的使用

文章目录1. 前言2. 父组件访问子组件2.1 $children2.2 $refs2.3 两者的使用区分3. 子组件访问父组件1. 前言我来给你们添蜜啦之前我们介绍了父传子使用props属性，子传父使用$emit发射自定义函数实现父子组件通信。那么我们有什么方法可以直接在父组件操作子组件的数据或函数、子组件操作父组件的数据或函数吗？下面就通过 $children 、$refs、$parent实现。有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。父组件访问
复制链接

扫一扫