vue3 expose 外部访问组件对象或方法

vue3 通过 expose 可以使外部访问组件内部对象或方法，就是我们使用一个组件时有时需要直接访问这个组件的对象或方法，在options api(选项式)默认当前实例是全部暴露的，而setup(组合式)默认是封闭的。

Expose Setup

<!--组件名称 exposeSetup.vue -->
<template>
  <div class="itxst">
    {{ state.message }}
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
//定义一个变量
const state = reactive({
  message: "www.itxst.com",
});
//定义一个方法
const play = () => {
  state.message = "ok";
};

//暴露state和play方法
defineExpose({
  state,
  play,
});
</script>

app.vue组件访问exposeSetup.vue组件里面的方法和对象。

<!--组件名称 app.vue -->
<template>
  <div class="itxst">
    <!-- 使用 ref  命令 -->
    <demo ref="demoComp"></demo>
    <button @click="test">点击测试</button>
  </div>
</template>
 <script setup>
import { reactive, ref } from "vue";
import demo from "./exposeSetup.vue";
//定义一个demo组件实例，名称要和上面的ref相同
const demoComp = ref(null);

//访问demo组件的方法或对象
const test = () => {
  //获取到 demo 组件的 message 数据
  let msg = demoComp.value.state.message;
  //执行了 demo 组件的 play方法
  demoComp.value.play();
};
</script>

在线试一试

Expose 选项式

<!--组件名称 exposeOptionsApi.vue -->
<template>
  <div class="itxst">
    {{ message }}
  </div>
</template>
<script>
//选项式默认当前实例是全部暴露的所以无需做任何处理
export default {
  name: "demo",
  //默认全部暴露 也可以通过expose控制那些需要暴露
  //expose: ['play'],
  data() {
    return {
      message: "www.itxst.com",
    };
  },
  methods: {
    play: function () {
      this.message = "ok";
    },
  },
};
</script> 

<!--组件名称 app.vue -->
<template>
  <div class="itxst">
    <!-- 使用 ref  命令 -->
    <demo ref="demoComp"></demo>
    <button @click="test">点击测试</button>
  </div>
</template>
<script >
import demo from "./exposeOptionsApi.vue";
export default {
  name: "app",
  //注册组件
  components: {
    demo,
  },
  methods: {
    test: function () {
      //获取到 demo 组件的 message 数据
      let msg = this.$refs.demoComp.message;
      //执行了 demo 组件的 play方法
      this.$refs.demoComp.play();
    },
  },
};
</script>  
<style scoped>
.itxst {
  text-align: center;
  padding: 20px;
}
</style>

在线试一试