第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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傳遞發(fā)生在$refs掛載之前,因為$refs無響應模式,即使掛載后也無法觸發(fā)子組件prop更新,所以輸出的是掛載之前傳遞的值(undefined)因此想請問有什么其它方法嗎?亦或是我理解錯誤?
查看完整描述

1 回答

?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

看過element的解決方案是采用自定義指令v-popover:name + ref="name"來實現(xiàn),通過獲取指令的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 // 獲取到目標的引用
    }
}

因為邏輯有點繞,還要添加自定義指令略顯麻煩,而且在實踐中發(fā)現(xiàn)對組件的擺放順序也有要求,后來發(fā)現(xiàn)有一種更簡單的方法可以達到類似目的,且沒有順序限制

<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 關注
  • 1127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號