vue3怎么获取组件实例对象-前端问答-PHP中文网

vue3怎么获取组件实例对象

betcha

发布： 2024-08-20 09:04:24

原创

1213人浏览过

在 Vue 3 中，可以通过以下几种方式获取组件实例对象：通过 emit 的回调函数通过 provide/inject通过 findRef

vue3怎么获取组件实例对象

如何获取 Vue 3 组件实例对象

在 Vue 3 中，获取组件实例对象有多种方法：

1. 通过 emit 的回调函数

当组件触发一个自定义事件时，可以使用 emitted 选项中的回调函数来获取组件实例。

立即学习“前端免费学习笔记（深入）”；

<code class="javascript"><template>
  <div>
    <button @click="emitTest">Emit Test</button>
  </div>
</template>

<script>
export default {
  emits: ['test'],
  methods: {
    emitTest() {
      this.$emit('test', this);
    }
  }
}
</script></code>

登录后复制

在父组件中，可以使用监听自定义事件的方法来获取组件实例：

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

查看详情

<code class="javascript"><script>
export default {
  setup() {
    const emitTest = (e) => {
      // e 是组件实例对象
      console.log(e);
    };

    return {
      emitTest,
    };
  },
}
</script></code>

登录后复制

2. 通过 provide/inject

如果父组件提供了某个值，子组件可以通过 inject 函数来获取该值，还可以获取 provide 对象，该对象包含父组件实例。

<code class="javascript">// 父组件
<template>
  <div>
    <provide-to-all v-slot="{ provide }">
      <my-component v-bind="provide" />
    </provide-to-all>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      msg: 'Hello from parent'
    };
  }
}
</script></code>

登录后复制

<code class="javascript">// 子组件
<template>
  <div>
    {{ provide.msg }}
    {{ provide.$parent }}
  </div>
</template>

<script>
export default {
  inject: ['provide'],
}
</script></code>

登录后复制

3. 通过 findRef

如果组件使用 ref 属性，可以通过 ref 属性来获取组件实例。

<code class="javascript"><template>
  <div>
    <my-component ref="myComponent" />
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myComponent);
  }
}
</script></code>

登录后复制

以上就是vue3怎么获取组件实例对象的详细内容，更多请关注php中文网其它相关文章！