今天小編在網(wǎng)上閑逛的時候奋刽，發(fā)現(xiàn)前端這幾年的發(fā)展離不開組件的概念备典，之前小編接觸到的組件异旧，基本都是這樣的。大家還可以關(guān)注我的微信公眾號提佣，蝸牛全棧吮蛹。
const app= Vue.createApp({
template: `
<input-item />
<common-item />
`
})
app.component('input-item',{
template: `<div>
<input />
</div>`
})
app.component('common-item',{
template: `<div>
Hello World
</div>`
})
const vm = app.mount("#root")
這個時候頁面顯示的一個文本框荤崇，一行文字 ，這個時候潮针，如果我們想通過一個按鈕术荤，來切換兩個元素的現(xiàn)實和隱藏關(guān)系，就可以把代碼修改成這樣
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'
}
// 也可以通過三目運算符來實現(xiàn)每篷。還可以借鑒綁定class或者style綁定
// this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'
}
},
template: `
<input-item v-show="currentItem === 'input-item'" />
<common-item v-show="currentItem === 'common-item'" />
<button @click="handleClick">切換</button>
`
})
app.component('input-item',{
template: `<div>
<input />
</div>`
})
app.component('common-item',{
template: `<div>
Hello World
</div>`
})
const vm = app.mount("#root")
有了動態(tài)組件之后瓣戚，同樣的需求，我們的代碼就可以寫成這樣
// 動態(tài)組件：根據(jù)數(shù)據(jù)的變化焦读，結(jié)合component這個標簽带兜，來隨時動態(tài)切換組件的實現(xiàn)
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: `
// 為了緩存文本框之前的數(shù)據(jù)
<keep-alive>
<component :is="currentItem" />
</keep-alive>
<button @click="handleClick">切換</button>
`
})
app.component('input-item',{
template: `<div>
<input />
</div>`
})
app.component('common-item',{
template: `<div>
Hello World
</div>`
})
const vm = app.mount("#root")
在小編的第一塊代碼中，都是引入自定義標簽的組件之后吨灭，就可以直接展示效果，這種成為同步組件 刑巧，當(dāng)然還有異步組件喧兄，主要是為了解決首屏加載速度的問題，借助Vue3中的defineAsyncComponent啊楚，就像這樣
const AsyncCommonItem = Vue.defineAsyncComponent(() => {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve({
template:'<div>this is an async component</div>'
})
},4000)
})
})
const app= Vue.createApp({
template: `
<div>
<common-item />
<async-common-item />
</div>
`
})
app.component('common-item',{
template: `<div>
Hello World
</div>`
})
app.component('async-common-item',AsyncCommonItem)
const vm = app.mount("#root")
當(dāng)然吠冤，今天小編還為大家準備了一些其他常用的知識點，就當(dāng)是飯后甜點吧
一恭理、ref：獲取DOM節(jié)點用的語法拯辙，慎用這種方法，后期維護的時候會很麻煩
const app= Vue.createApp({
data(){
return {
count: 1
}
},
mounted(){ // 只有早這個生命周期或者之后颜价，將元素掛載上涯保，才存在DOM的概念
console.log(this.$refs.countele) // <div>1</div>
this.$refs.commele.sayHello()
},
template: `
<div @click="count += 1">
<div ref="countele">{{ count }}</div>
<common-item ref='commele' />
</div>
`
})
app.component('common-item',{
methods:{
sayHello(){
alert('hello')
}
},
template: `<div>
Hello World
</div>`
})
const vm = app.mount("#root")
二、privide inject：用于組件與子組件的子組件傳遞數(shù)據(jù)的方式
我們在通過組件向子組件的子組件傳遞數(shù)據(jù)的時候周伦，可以這樣
const app= Vue.createApp({
data(){
return {
count: 1
}
},
template: `
<div>
<child :count="count"/>
</div>
`
})
app.component('child',{
props:['count'],
template: `<div>
<child-child :count="count" />
</div>`
})
app.component('child-child',{
props:['count'],
template: `<div>
{{ count }}
</div>`
})
const vm = app.mount("#root")
顯然夕春，這樣很麻煩，通過privide inject专挪，我們可以這么寫
const app= Vue.createApp({
data(){
return {
count: 1
}
},
// provide:{ // 不能直接調(diào)用data中的數(shù)據(jù)及志，需要的時候，需要寫成函數(shù)的方式
// count:1
// },
// 這種是一次性的寨腔，可以通過Vue3的getter方式響應(yīng)式速侈，通過傳統(tǒng)props一層層傳遞是可以
provide(){
return {
count: this.count
}
},
template: `
<div>
<child />
<button @click="count += 1">增加</button>
</div>
`
})
app.component('child',{
template: `<div>
<child-child />
</div>`
})
app.component('child-child',{
inject:['count'],
template: `<div>
{{ count }}
</div>`
})
const vm = app.mount("#root")
