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

问题描述

问 题

父组件

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

解决方案

问题已经解决很久了，还是自问自答一下吧。
看过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] // 获取到目标的引用
        })
    }
}

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

2017-02-27 更新

编写组件时发现第二种方法有个致命问题：popover组件的祖先不能有其他的组件，不然$parent将指向最近的一个祖先组件。

然后结合第一种方法做出修改

{
    mounted() {
        this.$nextTick(() => {
            this.$vnode.context.$refs[this.target] // 获取到目标的引用
        })
    }
}

这篇关于javascript - vue2 组件ref引用传递和生命周期的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！