Vue项目中常见问题(71)组件通信-$children与$parent

最新推荐文章于 2024-03-20 14:57:57 发布

学无止境QAQ

最新推荐文章于 2024-03-20 14:57:57 发布

阅读量441

点赞数 1

分类专栏： vue前台管理项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46368050/article/details/125010890

版权

本文详细介绍了在Vue项目中如何使用$children和$parent进行组件间的通信，通过具体案例展示了如何利用$refs、$children以及$parent解决父子组件通信问题，包括找子组件借钱和父组件调用子组件方法等场景。

摘要由CSDN通过智能技术生成

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

$children与$parent

1.基础结构搭建

在src/pages/Communication/ChildrenParentTest/ChildrenParentTest.vue中:

父组件中

<template>
  <div>
    <h2>BABA有存款: {
  { money }}</h2>
    <button>找小明借钱100</button><br />
    <button>找小红借钱150</button><br />
    <button>找所有孩子借钱200</button><br />

    <br />
    <!-- ref:可以获取到真实DOM节点，可以获取相应组件的实例VC -->
    <!-- ref也算在一种通信手段:在父组件中可以获取子组件(属性|方法) -->
    <Son />

    <br />
    <Daughter />
  </div>
</template>

<script>
import Son from "./Son";
import Daughter from "./Daughter";

export default {
  name: "ChildrenParentTest",
  data() {
    return {
      money: 1000,
    };
  },
  methods: {
  },
  components: {
    Son,
    Daughter,
  },
};