为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕田峪4524236 2018-10-10 17:13:43
父组件<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"来实现,通过获取指令的bindingname在当前实例的$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] // 获取到目标的引用
        })
    }
}

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


查看完整回答
反对 回复 2018-11-17
  • 1 回答
  • 0 关注
  • 1115 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号