点击vue路由视图中的一个按钮，怎么拿到包含路由视图的那个dom结构

Question

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

当路由视图为a.vue时，怎么才能点击a.vue中的一个按钮后取到this.$refs.page呢

Answer 1

谢邀！
通过props就可以！简单给您做了一个demo:

<template>
  <div class="hello" ref="page">
    <router-view :target="'page'"></router-view>
    <router-link to="/hello">跳转到HelloWorld</router-link>
  </div>
</template>

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

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

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

结果如下：

Answer 2

父子组件交互

Answer 3

用全局变量 可以绑定到Vue实例上 this.$el = this.$refs 子组件console.log(this.$el)
或者用vuex

Answer 4

this.$el.parentNode这就完了。
$el本身就是当前组件dom，直接取parentNode。