网站注入木马,商城购物网站开发意义,seo网络推广优势,dell网站的设计特色1、组件的作用用途
目的#xff1a; 提高代码的复用度#xff0c;和便于维护#xff0c;通过封装将复杂的功能代码拆分为更小的模块#xff0c;方便管理#xff0c; 当我们需要实现相同的功能时#xff0c;我们只需要复用已经封装好的组件#xff0c;而不需要重新编写相…1、组件的作用用途
目的 提高代码的复用度和便于维护通过封装将复杂的功能代码拆分为更小的模块方便管理 当我们需要实现相同的功能时我们只需要复用已经封装好的组件而不需要重新编写相同的代码 好处 代码复用我们可以在多个地方复用封装好的组件而不需要在每个地方都写相同的代码。 易于维护当我们需要修改某个功能时我们只需要在一个地方修改即可而不需要在多个地方修改。 易于理解通过将复杂的功能分解为更小的部分我们可以更容易地理解和管理代码 单一职责组件应该只做一件事情而不是承担多个无关的职责避免过度封装导致功能复杂化
2、组件的分类
2.1. 全局组件
好处只需要在main.ts 中挂载注册不用在使用页面中一个一个的引入注册减少了代码的冗杂 坏处会导致组件之间的依赖关系不明确导致组件之间查找调试错误时候难以追踪具体位置 同时由于全局组件会被打包的打包后的文件中导致初始化首屏加载时间长编译和预处理时间长从而影响用户的体验谨慎使用全局组件
首先我们会先将一个vue组件定义在一个单独的.vue文件中这就是单文件组件 如定义一个全局的顶部搜索栏 headerForm.vue 文件
// headerForm.vue
templatediv classheader-form全局顶部搜索栏name:{{ defineProps.name }}el-rowel-col :span6el-form :inlinetrue :modelformInline classdemo-form-inlineel-form-item label用户名el-input v-modelformInline.user placeholder请输入用户名/el-input/el-form-item/el-form/el-col/el-row/div
/template
script setup
import { ref, watch, onMounted } from vue
// defineProps 是vue3中新增的宏用于处理接收 props 的属性不需要引入可以直接在setup 语法糖中使用后续文章会专门介绍
const defineProps defineProps({name: {type: String,default: }
})
// 此处使用了 ref() 函数 创建了 对象为什么不用reactive() 函数呢因为使用reactive() 函数要使用嵌套函数保持响应式 需要使用 toRefs() 将其转换ObjectRefImpl 对象详情请看 第五节
let formInline ref({user: defineProps.name // 将user默认值设置为父组件传入的name 属性值
})
// watch 的相关内容请看第六节 watch
watch(() defineProps.name, (n,o) {// 监听name 的变化用于同步更新user属性formInline.value.user defineProps.name
})
/script
style langscss scoped
.header-form{width: 100vw;height: 46px;
}
/style// main.ts
import { createApp } from vue
import ElementPlus from element-plus
import App from ./App.vue
!-- 引入全局组件 --
import HeaderFrom from ./components/headerForm.vue
import element-plus/dist/index.css
import ./style.css
const app createApp(App)
!-- 挂载全局组件 --
// app.component(注册的组件名称, 引入的单文件组件)
app.component(HeaderFrom, HeaderFrom) // 支持链式调用!-- 如果全局组件比较多可以这样使用将element的所有图标注册到项目中非必要勿用 --
import * as ElementPlusIconsVue from element-plus/icons-vue
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}app.use(ElementPlus)
app.mount(#app)!-- App.vue --
template
div classpar// 直接使用 HeaderFrom 即可不需要再次引入HeaderFrom :namename/HeaderFromProvide/Providebutton clickhandleChangeName父组件change name/button/div
/template
script setup
import Provide from ./components/provide1.vue
import { ref, provide, inject } from vue
let msg ref(Andy start)
let name ref(Andy)const handleChangeName () {name.value Andy change
}
const sChangeName () {msg.value Andy sChangeName
}
provide(pName, {msg, sChangeName})
/scriptstyle langscss
.img-box{display: inline-block;width: 100px;height: 100px;
}
/style注意如果声明的组件不是项目中绝大多数页面共用的请勿注册全局组件应为即使在页面中没有使用该组件也会导致引入的组件被打包到打包后的文件中无法通过 tree-shaking 自动移除因为组件被挂载到app实例上
tree-shaking消除无用的js代码 1、在webpack中通过配置 optimization.usedExports: true开启tree-shaking功能 2、在vite中通过配置 rollup-plugin-commonjs开启tree-shaking功能
2.2. 局部组件
好处 1、可以非常清晰父子组件之间的依赖关系便于维护 2、同时只有在页面加载时候才会使用组件可以更好的支持tree-shaking减少打包体积 坏处 需要每次使用时候导入一次增加文件的导入语句
!-- 定义局部组件 dialogForm.vue --
template
div classdialog-containerdiv classdialog-formdiv classdialog-headerdiv classdialog-title新增用户/divel-icon classdialog-closeClose //el-icon/divel-form :modelformData label-width80px refformDataRefel-form-item label用户名 propusernameel-input v-modelformData.username placeholder请输入用户名 //el-form-itemel-form-item label职位 proppostel-input v-modelformData.username placeholder请输入职位 //el-form-itemel-button clicksubmit typeprimary提交/el-button/el-form/div
/div
/template
script setup
import { reactive, ref } from vueconst formDataRef ref()
let formData ref({username: ,post:
})const submit () {console.log(, formData.value)
}/script!-- 在父组件myComponents.vue 中引入使用 --
templatediv classmy-components页面类型:{{pageNameType}}DialogForm/DialogForm/div/templatescript setupimport { ref, reactive } from vue// 在setup 中直接引入组件即可打包编译时会自动编译成组件不需要再次使用componentsimport DialogForm from ./dialogForm.vueconst pageNameType ref(局部组件)/script2.3. 动态组件
动态组件当一个页面中的内容需要通过不同的组件来进行展示时可以通过动态组件的切换来实现 需要注意的是vue3中 需要使用markRaw() 或者 shallowReactive() 来创建组件否则页面会发出警告导致页面不更新
动态组件是通过 :is 属性来实现组件之间的切换的
component :is组件名/component如下实现
templatediv classmy-components页面类型:{{pageNameType}}component :iscomName/componentel-button typeprimary clickhandleChangeCom切换组件/el-button/div
/template
script setupimport { ref, markRaw } from vueimport Work from ./work.vue // 组件内容 The job is GeYous live.import UserInfo from ./userInfo.vue // 组件内容用户信息const pageNameType ref(动态组件)const workRaw markRaw(Work) // 使用markRaw进行标记避免转换为响应式对象const userInfoRaw markRaw(UserInfo)let comName ref(workRaw) // 默认展示组件为 Workconst handleChangeCom () {console.log(, comName)if (comName.value workRaw) {comName.value userInfoRaw} else {comName.value workRaw}}
/script2.4. 递归组件
vue2 中是通过组件中的name属性来区分组件的直接在自己组件中使用自己同名组件即可实现递归 如: 递归组件注意需要有跳出循环的出口不然会导致死循环进而栈溢出 跳出条件v-if“endNum 4” 若不跳出循环将会报错
templatediv classrecursion-com v-ifendNum 4span{{name}}--{{ num }}--{{ endNum }}/spandiv // 此处调用直接与自己的组件名称保持一致即可RecursionCom :numendNum /RecursionCom /div/div
/template
script
export default {name: RecursionCom, // 注意需要声明组件名称components: {},props: {num: {type: Number,default: 0}},data() {return {name: vue2递归组件,list: [22, 33],endNum: 0}},created() {this.endNum this.numthis.endNum}
}
/scriptvue3 中
父组件中
template
divvue3 父组件RecursionComV3 :datadata/RecursionComV3
/div
/template
script setup
import { ref } from vue
import RecursionComV3 from ./recursionComV3.vue;
// 声明一个data 变量数据
const data ref([{id: 1-1,name: 张家,children: [{id: 1-1-2,name: 张三,children: [{id: 1-1-3,name: 张三郎,}]}]},{id: 1-2,name: 李家,children: [{id: 1-2-2,name: 李四,children: [{id: 1-2-3,name: 李四郎,}]}]}
])
/script!-- 子组件中 --
使用js 书写时
template
div classmy-recursiondiv v-for(item, index) in props.data :keyitem.iddiv classitem{{ item.id }}:{{item.name}}/divmyTreeV3 v-ifitem.children item.children.length :dataitem.children/myTreeV3/div
/div
/template
script
// 如果使用js 需要在子组件中使用export default{} 给组件命名name
export default {name: myTreeV3,
}
/script
script setup
import { ref, reactive, toRefs, onMounted, watch, computed } from vue
const props defineProps({data: {type: Array,default: () ([]),},
})
/script最终运行结果如下图
若子组件使用ts 书写 注意ts 中需要使用到递归组件需要使用到递归类型,需要将数据类型进行声明 同时 调用的递归组件名称 需要与 自己的文件名保持一致否则不生效比如文件名为recursionComV3Ts.vue则调用时需要使用
如下
template
div classmy-recursiondiv v-for(item) in data :keyitem.iddiv classitem{{ item.id }}:{{item.name}}/div!-- 使用ts 写递归组件时调用的必须与自己的文件名保持一致 --recursionComV3Ts v-ifitem?.children item?.children?.length :dataitem?.children/recursionComV3Ts/div
/div
/template
script setup langts
// TreeData 声明接口类型
interface TreeData{id: stringname: stringchildren?:TreeData[] // children 是可以选项
}
defineProps{data?:TreeData[]
}()
/script3、组件的使用 注意事项
a、单文件组件结构、 b、命名规范便于管理 c、props属性传递声明类型明确 d、emit事件机制 e、slot插槽非常重要的部分可以动态的将内容html插入到组件中
下节 单独介绍 组件之间的传参事件等
