vue2 组件ref引用传递和生命周期的问题

Question

父组件<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）因此想请问有什么其它方法吗？亦或是我理解错误？

Answer 1

看过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] // 获取到目标的引用
        })
    }
}

两种方法皆可，都有各自的特点，看自己的使用情况选择吧