MyPrint打印设计器（四）vue3 函数式调用组件

vue3 函数式调用组件

vue中，通常情况下调用一个组件需要以下步骤

• 导入组件
• 在template引入组件，并且设置ref属性
• 在js模块定义对应的ref属性
• 通过ref对象调用对应的方法

如果这个组件在template是不必要的，那么可以通过函数式调用组件，
来省略在template标签中引入组件，来简化调用步骤，做到可以通过纯js调用组件

这种方法也有一定的缺陷，因为在初始化的时候就已经确定了组件的DOM所在的层级，所以无法灵活的控制DOM元素的层级，
所有一般在Message这种不关心组件DOM层级的组件中使用，以下是使用示例，结尾有实战项目中的使用示例

组件代码

<!--MessageBox.vue-->
<script setup lang="ts">
  import {
   ref} from "vue";
  
  interface Message {
   
    msg: string
  }
  
  defineExpose({
   
    success, clear
  });
  const messageContentList = ref<Message[]>([]);
  
  function success(msg: string) {
   
    messageContentList.value.push({
   msg})
  }
  
  function clear(