VUE中父子组件数据的访问——子访父

最新推荐文章于 2024-09-13 15:40:26 发布

一个前端女子

最新推荐文章于 2024-09-13 15:40:26 发布

阅读量2.8k

点赞数 2

分类专栏： vue2 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44173499/article/details/123441824

版权

本文介绍了在Vue中子组件如何访问父组件的数据，主要通过`this.$parent`来实现，包括直接调用父组件的方法、访问计算属性以及获取data中的属性。同时提到了使用`$root`来获取应用的根组件实例。

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

方法一：在子组件直接使用this.$parent

this.$parent链式调用取父组件之上的组件

(1)获取父组件的方法/计算属性

在子组件的函数中: this.$parent.方法名();

this.$parent.计算属性; 计算属性只会执行一次

在子组件的标签上: $parent.方法名

(2)获取父组件data的属性

在子组件的函数中: this.$parent.属性名;

在子组件的标签上: $parent.属性名

拿到父实例（父组件）数据中心的数据 this.$parent.title

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <div id="app">
        <child>
        
        </child>
    </div>

    <template id="child">
        <div style=