vue.js 获取父元素

<!-- ParentComponent.vue -->
<template>
  <div ref="parentDiv">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 父组件可以访问自己的DOM元素
    console.log(this.$refs.parentDiv);
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="logParentElement">Log Parent Element</button>
</template>

<script>
export default {
  methods: {
    logParentElement() {
      // 子组件无法直接访问父组件的DOM元素，但可以通过事件等方式间接获取
      this.$emit('log-parent');
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div ref="parentDiv">
    <ChildComponent @log-parent="handleLogParent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleLogParent() {
      console.log(this.$refs.parentDiv);
    }
  }
};
</script>