鍍金池/ 問答/HTML/ 點擊vue路由視圖中的一個按鈕，怎么拿到包含路由視圖的那個dom結(jié)構(gòu)

點擊vue路由視圖中的一個按鈕，怎么拿到包含路由視圖的那個dom結(jié)構(gòu)

<template>
    <section ref="page">
        <router-view></router-view>
    </section>
</template>

當(dāng)路由視圖為a.vue時，怎么才能點擊a.vue中的一個按鈕后取到this.$refs.page呢

回答
編輯回答
陪我終

this.$el.parentNode這就完了。
$el本身就是當(dāng)前組件dom，直接取parentNode。

2018年3月24日 03:15
編輯回答
懶豬

父子組件交互

2017年4月10日 08:44
編輯回答
情皺

用全局變量 可以綁定到Vue實例上 this.$el = this.$refs 子組件console.log(this.$el)
或者用vuex

2017年6月18日 20:13
編輯回答
誮惜顏

謝邀！
通過props就可以！簡單給您做了一個demo:

<template>
  <div class="hello" ref="page">
    <router-view :target="'page'"></router-view>
    <router-link to="/hello">跳轉(zhuǎn)到HelloWorld</router-link>
  </div>
</template>

<script>
import '../assets/css/style.scss'
export default {
  name: 'Index'
}
</script>

clipboard.png

<template>
  <div>
    Hello Wolrd
  </div>
</template>

<script>
export default {
  props: [
    'target'
  ],
  mounted () {
    console.log(this.$parent.$refs[this.target])
  }
}
</script>

clipboard.png
結(jié)果如下：

clipboard.png

2017年10月29日 14:49