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

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

2017-02-27 更新

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

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

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

Answer 2

挂载前用created事件 。
还有你的需求是啥？为啥要传父组件某个dom实例 还要在属性传递前？

Answer 3

这个…… 很反模式啊……

可以试试传递函数。

<template>
    <span ref="reference">text</span>
    <c-child :target="passRef"></c-child>
</template>
<script>
export default {
    methods: passRef(callback) {
      return callback(this.$refs.reference)
    }
}
</script>

子组件：

<script>
export default {
    mounted() {
        this.targe(t => {
            console.log(this.t)
        })
    }
}
</script>

Answer 4

父组件直接provide自身实例 子组件通过父组件实例想拿什么拿什么