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&nbsp;+&nbsp;ref="name"来实现，通过获取指令的binding即name在当前实例的$refs中获取到目标组件的引用，再将指令元素挂载到目标组件的$refs下<el-popover&nbsp;ref="popover"</el-popover><el-button&nbsp;v-popover:popover>hover&nbsp;激活</el-button>//&nbsp;directive{ &nbsp;&nbsp;&nbsp;&nbsp;bind(el,&nbsp;binding,&nbsp;vnode)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vnode.context.$refs[binding.arg].$refs.reference&nbsp;=&nbsp;el; &nbsp;&nbsp;&nbsp;&nbsp;} }//&nbsp;template&nbsp;script{ &nbsp;&nbsp;&nbsp;&nbsp;mounted()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$refs.reference&nbsp;//&nbsp;获取到目标的引用 &nbsp;&nbsp;&nbsp;&nbsp;} }因为逻辑有点绕，还要添加自定义指令略显麻烦，而且在实践中发现对组件的摆放顺序也有要求，后来发现有一种更简单的方法可以达到类似目的，且没有顺序限制<el-button&nbsp;ref="name">hover&nbsp;激活</el-button><el-popover&nbsp;target="name"></el-popover>{ &nbsp;&nbsp;&nbsp;&nbsp;mounted()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$nextTick(()&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$parent.$refs[this.target]&nbsp;//&nbsp;获取到目标的引用 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;} }两种方法皆可，都有各自的特点，看自己的使用情况选择吧