vue3中使用defineCustomElement自定义组件时如何初始化传入值

在 Vue3 中，如果你想通过 `defineComponent` 或 `defineCustomElement` 自定义组件并传递初始值，你需要在组件选项（options）里处理 props 的接收和处理。这里是一个简单的例子：

import { defineComponent } from 'vue';

export default defineComponent({
  // 定义组件名称
  name: 'MyCustomComponent',
  
  // 接收 prop
  props: {
    initialValue: {
      type: String,
      default: 'default_value', // 如果没有传入值，则默认为这个值
    },
  },

  // 组件模板或渲染函数
  template: '<div>{{ initialValue }}</div>',

  // 初始化数据或计算属性
  setup(props) {
    const value = props.initialValue; // 获取从父组件传递进来的值
    return { value };
  },
});

当你在父组件中使用这个自定义组件，并传入初始值时，像这样：

<template>
  <my-custom-component :initial-value="customInitValue"></my-custom-component>
</template>

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

export default {
  components: {
    MyCustomComponent,
  },
  data() {
    return {
      customInitValue: 'passed_in_value', // 传递给自定义组件的初始值
    };
  },
};
</script>

在这个例子中，`customInitValue` 将会被传递给 `MyCustomComponent`，并在内部显示。