Vue3的动态组件和异步组价
今天小编在网上闲逛的时候,发现前端这几年的发展离不开组件的概念,之前小编接触到的组件,基本都是这样的
const app= Vue.createApp({
template: `
`
})app.component('input-item',{
template: `
`
})app.component('common-item',{
template: `
Hello World
`
})
const vm = app.mount("#root")
这个时候页面显示的一个文本框,一行文字 ,这个时候,如果我们想通过一个按钮,来切换两个元素的现实和隐藏关系,就可以把代码修改成这样
const app= Vue.createApp({
data(){
return {
currentItem: 'input-item'
}
},
methods:{
handleClick(){
if(this.currentItem === 'input-item'){
this.currentItem = 'common-item'
}else{
this.currentItem = 'input-item'
}
// 也可以通过三目运算符来实现。还可以借鉴绑定class或者style绑定
// this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'
}
},
template: `
`
})app.component('input-item',{
template: `
`
})app.component('common-item',{
template: `
Hello World
`
})
const vm = app.mount("#root")
有了动态组件之后,同样的需求,我们的代码就可以写成这样
// 动态组件:根据数据的变化,结合component这个标签,来随时动态切换组件的实现
const app= Vue.createApp({
data(){
return {
currentItem: 'input-item'
}
},
methods:{
handleClick(){
if(this.currentItem === 'input-item'){
this.currentItem = 'common-item'
}else{
this.currentItem = 'input-item'
}
}
},
template: `
// 为了缓存文本框之前的数据
`
})app.component('input-item',{
template: `
`
})app.component('common-item',{
template: `
Hello World
`
})
const vm = app.mount("#root")
在小编的第一块代码中,都是引入自定义标签的组件之后,就可以直接展示效果,这种成为同步组件 ,当然还有异步组件,主要是为了解决首屏加载速度的问题,借助Vue3中的defineAsyncComponent,就像这样
const AsyncCommonItem = Vue.defineAsyncComponent(() => {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve({
template:'this is an async component'
})
},4000)
})
})
const app= Vue.createApp({
template: ` `
})app.component('common-item',{
template: `
Hello World
`
})app.component('async-common-item',AsyncCommonItem)const vm = app.mount("#root")
当然,今天小编还为大家准备了一些其他常用的知识点,就当是饭后甜点吧
一、ref:获取DOM节点用的语法,慎用这种方法,后期维护的时候会很麻烦
const app= Vue.createApp({
data(){
return {
count: 1
}
},
mounted(){ // 只有早这个生命周期或者之后,将元素挂载上,才存在DOM的概念
console.log(this.$refs.countele)// 1
this.$refs.commele.sayHello()
},
template: `{{ count }}
`
})app.component('common-item',{
methods:{
sayHello(){
alert('hello')
}
},
template: `
Hello World
`
})const vm = app.mount("#root")
二、privide inject:用于组件与子组件的子组件传递数据的方式
我们在通过组件向子组件的子组件传递数据的时候,可以这样
const app= Vue.createApp({
data(){
return {
count: 1
}
},
template: ` `
})app.component('child',{
props:['count'],
template: `
`
})app.component('child-child',{
props:['count'],
template: `
{{ count }}
`
})
const vm = app.mount("#root")
显然,这样很麻烦,通过privide inject,我们可以这么写
const app= Vue.createApp({
data(){
return {
count: 1
}
},
// provide:{ // 不能直接调用data中的数据,需要的时候,需要写成函数的方式
//count:1
// },
// 这种是一次性的,可以通过Vue3的getter方式响应式,通过传统props一层层传递是可以
provide(){
return {
count: this.count
}
},
template: `
`
})app.component('child',{
template: `
`
})app.component('child-child',{
inject:['count'],
template: `
{{ count }}
`
})
const vm = app.mount("#root")
【Vue3的动态组件和异步组价】大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈
文章图片
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量