父子访问：子取父---$parent,$root

最新推荐文章于 2024-07-05 09:04:25 发布
最新推荐文章于 2024-07-05 09:04:25 发布
阅读量120 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57532280/article/details/118192735
版权 
<!DOCTYPE html>
<html lang="zh">

<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">
        <cpn></cpn>
    </div>


    <template id="cpn">
        <div>
            <h1>我是子组件cpn</h1>
            <ccpn></ccpn>
        </div>
    </template>

    <template id="ccpn">
        <div>
           <h2> 我是子组件cpn的子组件ccpn</h2>
            <button @click = "btnClick">点击打印</button>
        </div>
    </template>
       
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                     
                }
            },
            components:{
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            name: '我是cpn的name'
                        }
                    },
                    components:{
                        ccpn: {
                            template: '#ccpn',
                            methods: {
                                btnClick() {
                                    console.log(this.$parent.name);
                                }
                            },
                        }
                    }
                },
            }
        })
    </script>  

</body>

</html>

通过$parent，ccpn这个组件取到了父组件cpn的name。但是这个方法开发中会使组件失去独立性，复用性不高。

注：我所有的vue知识皆通过“2019年coderwhy vue-vuejs从入门到精通教程”这个视频所习得。

$root，访问根组件：

ccpn: {
    template: '#ccpn',
    methods: {
        btnClick() {
            console.log(this.$root);
        }
    },
}

子组件ccpn会直接访问到Vue实例。

前端朱一龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例详解vue中的$root和$parent
10-17
主要介绍了vue中的$root和$parent ，本文通过文字实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
$parent(获取父组件) 和 $root(获取根组件)
weixin_51614564的博客
07-03 598
1.$parent（获取父组件) 2.$root(获取根组件)
Vue 中 $root、$refs、$parent 的使用详解
最新发布
My_wife_QBL的博客
07-05 487
Vue 的$root$refs和$parent属性提供了强大的组件通信和操作功能，使得组件之间的交互更加灵活和高效。通过$root访问根实例、$refs访问子组件或 DOM 元素、$parent访问父组件，我们可以构建出结构清晰、功能丰富的组件系统。希望本文能够帮助你全面理解 Vue 的这些属性，并在实际开发中发挥其最大的价值。
31. 父子组件的访问方式： $parent-$root
Bi-Hu的博客
07-24 100
说了 父组件直接访问子组件，现在讲 子组件访问父组件: 有这么个代码： <body> <template id="cpn"> <div style="border: solid red 2px "> <h2>这里是 cpn</h2> ...
vue中子组件访问父组件中的数据方法，使用$parent或者$root
easyboot的专栏
06-12 297
@{ ViewData["Title"] = "parent"; } <h1>@ViewData["Title"]</h1> <div id="app"> <cpn ref="cpnref"> </cpn> </div> <template id="cpn"> <div> <h2>我是子組件</h2> <button v.
vue $root(访问根组件) $parent(访问父组件) $refs/$children(访问子组件)
weixin_42448623的博客
11-11 1842
$root 访问根组件 <div id="temp"> <my-con></my-con> </div> Vue.component('my-son',{ template:'<div>根组件：{{this.$root.msg}}</div>' }) new Vue({ el:"#temp", data:{...
nativescript-angular-parent-child-routes：示例路由器如何与AngularNativeScriot移动应用程序中的父级和子级路由一起使用
02-04
在这个配置中，`ParentComponent`是父组件，`Child1Component`和`Child2Component`是子组件，分别对应`/parent/child1`和`/parent/child2`的URL路径。 在NativeScript中，我们需要确保正确地导入和配置`...
Ruby-ActsAsTree扩展ActiveRecord添加亲子关系支持
08-15
1. **父子关系**：通过定义一个字段（通常是`parent_id`）来标识父节点，每个记录可以链接到另一个记录作为其父级。 2. **遍历树**：提供了便捷的方法来遍历整个树，例如`descendants`方法返回所有子节点，`...
swift代码-swift数据结构：树
07-14
4. 父节点（Parent Node）：除了根节点外，每个节点都有一个父节点。 5. 叶节点（Leaf Node）：没有子节点的节点。 6. 边（Edge）：连接节点的线，表示父子关系。 在Swift中，我们可以创建一个泛型树节点类来表示树...
浅谈vue中$bus的使用和涉及到的问题
10-15
4. **组件间通信的其他方式**：除了$bus，Vue.js还提供了`provide/inject`、`$parent/$refs`等方法来实现父子组件间的通信，以及`$root`来实现全局状态的访问。而兄弟组件间也可以通过共同的父组件来实现通信。 ###...
细聊组件通信（$children、$refs、$parent、$root）
weixin_61285710的博客
01-14 445
父组件访问子组件：使用$children或$refs 子组件访问父组件：使用$parent 子组件访问根组件：$root
vue 通过$children或$refs获取子组件、通过$parent获取父组件，$root获取根组件
jjw_zyfx的博客
10-05 2126
<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn ref="aaa"></cpn> <button @click="btnClick">按钮</button> </div> <templat...
Vue—组件实例之$root、$parent、$children
雷雨天的雷胖子
08-31 4949
一、概述 获取Vue的根组件实例。
root
m0_37180457的博客
03-20 224
adb 的root 权限是在system/core/adb/adb.c 中控制。主要根据ro.secure 以及 ro.debuggable 等system property 来控制。默认即档ro.secure 为0 时，即开启root 权限，为1时再根据ro.debuggable 等选项来确认是否可以用开启root 权限。为此如果要永久性开启adb 的root 权限，有两种修改的方式:1. 修改...
VUE学习之实例属性$root, $parent
liubangbo的专栏
05-23 4667
Vue 子组件可以通过 $root 属性访问根实例的属性和方法 Vue 子组件可以通过 $parent属性访问父组件实例的属性和方法 下面写个简单的demo： <div id="app"> <first-child></first-child> </div> Vue.component("first-child",...
vue组件间通信方法集
老古懂的博客
05-09 1638
整理vue中8种常规的通信方案 1、通过 props 传递 2、通过 $emit 触发自定义事件 3、使用 ref 4、EventBus 5、$parent 或$root 6、attrs 与 listeners 7、Provide 与 Inject 8、Vuex 1、通过 props 传递 /*适用场景：父组件传递数据给子组件 子组件设置props属性，定义接收父组件传递过来的参数 父组件在使用子组件标签中通过字面量来传递值*/ //子组件 props:{ // 字符串形式 name
解读vue3中的$refs、$parent、$root、provide 和 inject
九仞山的专栏
06-09 6838
详细介绍了vue3中的$refs、$parent、$root、provide 和 inject各自的用法和优缺点
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
大前端
08-16 7514
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值