我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
跨层级获取组件实例
ref
ref是vue预设的一个属性,通过$refs我们可以获取dom或者组件实例。
<p ref="p">获取到dom</p>
<child-component ref="child">获取到一个组件实例</child-component>
通过this.$refs.p
我们获取到的是html元素p的dom
通过this.$refs.child
获取的是组件child-component的实例。
但是this只能获取到当前组件上下文的实例或者dom,但是如果我们跨层级获取,那就有点麻烦了。ref只能获取当前组件上下文组件,无法跨层级。
递归方式
this.$parent
访问父实例
this.$children
当前实例的直接子组件。(数组,不保证顺序,不是响应式)
this.$parent.$parent.$refs.xxx
跨级访问父组件
this.$children[0].$children[1].$refs.xxx
跨级访问子组件
使用这种方式,代码繁琐,性能低效。
优雅的方式
我们需要使用到一个自定义指令,这个指令已经有人做成插件了,我们可以直接安装
yarn add vue-ref --dev
安装完毕后在main.js中引用
import ref from "vue-ref";
Vue.use(ref, { name: "ant-ref" });
name表示自定义指令名
引用完毕后我们还需要配合provide和inject。
我们需要在父组件中provide声明几个方法,然后在子组件中通过自定义指令的方式,自动将需要跨层级访问的组件实例通过provide声明的方法,统一挂载到父组件实例上。
获取的时候呢,也是通过provide的方法获取挂载到父组件上的子组件实例。
父组件
<script>
export default {
provide() {
return {
//挂载到父组件的方法
setChildrenRef: (name, ref) => {
this[name] = ref;
},
//获取组件实例的方法
getChildrenRef: (name) => {
return this[name];
},
//获取父组件实例
getRef: () => {
return this;
},
};
},
}
</script>
子组件
<template>
<div class="border2">
<h3 v-ant-ref="c => setChildrenRef('childrenE', c)">E 结点</h3>
</div>
</template>
<script>
export default {
inject: {
setChildrenRef: {
default: () => {}
},
getParentRef: {
from: "getRef",
default: () => {}
},
getParentChildrenRef: {
from: "getChildrenRef",
default: () => {}
}
}
};
</script>
这样一个跨层级获取组件实例就完成了。
补充
//获取根组件实例
this.getParentRef()
//获取指定名称组件实例
this.getParentChildrenRef("childrenH")
//这里输出的是DOM
this.getParentChildrenRef("childrenE")
0
评论(0)