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> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10703.html