vue3中，引入data数据方式 & 引入组件的2种方式

vue3中，引入data数据方式 & 引入组件的2种方式

1、引入data数据方式

1、页面文件

index.vue

<script lang="ts" setup>
    import { topicItem } from './data'
	const topicItems = ref(topicItem)
</script>

2、data数据

./data.ts

export const topicItem = [
    {
      type: 'input',
      prop: 'topicName',
      label: '小组名称：',
    //   maxLength: 100,
    //   slot: true,
      limit: true,
      placeholder: '请输入',
    },
    {
      type: 'date',
      prop: 'startDate',
      label: '开始时间：',
    //   slot: true,
    className: 'width50',
      placeholder: '请输入',
    },
]

2、引入组件方式

2.1、直接引入

<div>
    <CustomForm :form-data="formData" :form-item="topicItems"></CustomForm>
</div>

<script lang="ts" setup>
	import CustomForm from './customForm.vue'
</script>

2.2、多个引入

1、组件根文件集合

src\app\science\views\components\index.ts

export { default as CustomForm } from './customForm.vue'
export { default as CustomTable } from './customTable.vue'
export { default as ChangeCurTab } from './changeCurTab.vue'

2、页面引入

index.vue

<div>
   <CustomForm
      :form-data="formData"
      :form-item="baseInfoItem"
      @change-radio="handleRadioValue"
   ></CustomForm>
</div>

<script>
 import { CustomForm } from '../../../components/index'
    
export default defineComponent({
    name: 'BaseInfo',
    components: {
      CustomForm,
    },
}
</script>