当前位置:网站首页>$parent/$children and ref
$parent/$children and ref
2022-07-31 03:33:00 【The life of an elephant and an ant】
- ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
- $parent / $children:访问父 / 子实例
需要注意的是:这两种都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据.我们先来看个用 ref 来访问组件的例子:
// component-a 子组件
export default {
data () {
return {
title: 'Vue.js'
}
},
methods: {
sayHello () {
window.alert('Hello');
}
}
}
// 父组件
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default {
mounted () {
const comA = this.$refs.comA;
console.log(comA.title); // Vue.js
comA.sayHello(); // 弹窗
}
}
</script>
不过,这两种方法的弊端是,无法在跨级或兄弟间通信.
// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-b></component-b>
我们想在 component-a 中,访问到引用它的页面中(这里就是 parent.vue)的两个 component-b 组件,那这种情况下,就得配置额外的插件或工具了,比如 Vuex 和 Bus 的解决方案.
总结
常见使用场景可以分为三类:
1.父子通信:
父向子传递数据是通过 props,
子向父是通过 events($emit);
通过父链 / 子链也可以通信($parent/$children);
ref 也可以访问组件实例;
provide/inject API;$attrs/$listeners
2.兄弟通信:
Bus;Vuex
3.跨级通信:
Bus;Vuex;provide/inject API、$attrs/$listeners
边栏推荐
- MultipartFile file upload
- errno错误码及含义(中文)
- The BP neural network
- SocialFi 何以成就 Web3 去中心化社交未来
- TCP和UDP详解
- Pytest电商项目实战(上)
- Ambiguous method call.both
- Mysql 45 study notes (23) How does MYSQL ensure that data is not lost
- 3.5 】 【 Cocos Creator slow operating system to stop all animations
- [C language] General method of expression evaluation
猜你喜欢
随机推荐
数据库文件中的未分配的块和未使用的块的区别
Redis implements distributed locks
BUG definition of SonarQube
MP使用时的几个常见报错
Recursive query single table - single table tree structure - (self-use)
点云DBSCAN聚类(MATLAB,非内置函数)
STM32问题合集
【Cocos Creator 3.5】缓动系统停止所有动画
Key Technologies of Interface Testing
Golang中的addressable
[Compilation principle] Design principle and implementation of recursive descent parsing
LeetCode simple problem to find the subsequence of length K with the largest sum
Mysql 45 study notes (twenty-four) MYSQL master-slave consistency
IIR filter and FIR filter
[Swift]自定义点击APP图标弹出的快捷方式
数据库实现分布式锁
Atomic operation CAS
【C语言】预处理操作
注解用法含义
自己的一些思考