父组件<template> <span ref="reference">text</span> <c-child :target="$refs.reference"></c-child></template><script>export default { ...etc, mounted() { console.log(this.$refs.reference) // output: c-child }}</script>子组件<script>export default { ...etc, mounted() { console.log(this.target) // output: undefined }}</script>目前使用的方法只能在父组件获得引用,子组件获取不到,我猜想是prop传递发生在$refs挂载之前,因为$refs无响应模式,即使挂载后也无法触发子组件prop更新,所以输出的是挂载之前传递的值(undefined)因此想请问有什么其它方法吗?亦或是我理解错误?
1 回答

牛魔王的故事
TA贡献1830条经验 获得超3个赞
看过element的解决方案是采用自定义指令v-popover:name
+ ref="name"
来实现,通过获取指令的binding
即name
在当前实例的$refs
中获取到目标组件的引用,再将指令元素挂载到目标组件的$refs
下
<el-popover ref="popover"</el-popover><el-button v-popover:popover>hover 激活</el-button>
// directive{ bind(el, binding, vnode) { vnode.context.$refs[binding.arg].$refs.reference = el; } }// template script{ mounted() { this.$refs.reference // 获取到目标的引用 } }
因为逻辑有点绕,还要添加自定义指令略显麻烦,而且在实践中发现对组件的摆放顺序也有要求,后来发现有一种更简单的方法可以达到类似目的,且没有顺序限制
<el-button ref="name">hover 激活</el-button><el-popover target="name"></el-popover>
{ mounted() { this.$nextTick(() => { this.$parent.$refs[this.target] // 获取到目标的引用 }) } }
两种方法皆可,都有各自的特点,看自己的使用情况选择吧
添加回答
举报
0/150
提交
取消