component 動(dòng)態(tài)組件
Vue官網(wǎng)上提供了一個(gè)動(dòng)態(tài)組件 <component :is="currentTabComponent"> ，那么這里的 is 到底是什么呢词裤？
官網(wǎng)介紹的太分散了刺洒，這里盡量全面的列舉出來(lái)。如果有遺漏歡迎補(bǔ)充吼砂。
- 原生HTML
<component is="input" placeholder="原生HTML" value='123'></component>
<component is="div">這是div</component>
input逆航、select 這些 HTML 自帶的都是可以的，div這些也可以渔肩。
- 全局組件
<component is="el-input" placeholder="UI庫(kù)的文本框" style="width: 200px;" v-model='value'></component>
最常見(jiàn)的全局組件因俐，就是各種UI庫(kù)了，他們會(huì)用插件的方式被注冊(cè)成為全局組件赖瞒，所以我們可以直接使用el-input這類(lèi)的標(biāo)簽女揭。
- 局部組件
<component is="test" str="局部注冊(cè)的組件" ></component>
需要先在 組件的 components: { test } 部分注冊(cè)組件，然后就可以用了栏饮。
- 異步組件
<component
:is="defineAsyncComponent(()=>import('./components/test'))"
str="局部注冊(cè)的組件"
></component>
這種方式就不需要在組件的 components 里面注冊(cè)了，可以直接使用磷仰∨坻遥可以實(shí)現(xiàn)真按需加載。
如何動(dòng)態(tài)灶平？
看了上面的例子你可能會(huì)奇怪伺通，直接使用標(biāo)簽不香嗎？干嘛非要用這個(gè)動(dòng)態(tài)組件逢享？
動(dòng)態(tài)組件有幾個(gè)好處：
動(dòng)態(tài)加載罐监、動(dòng)態(tài)改變組件類(lèi)型，比如官網(wǎng)里的例子瞒爬， 改變tab就改變了組件弓柱。
遍歷
<template v-for="key in [101, 102, 103, 104]" :key="key">
<component :is="dict[key]"></component>
</template>
const dict = {
101: 'input',
102: 'el-input',
103: 'test',
104: defineAsyncComponent( () =>
import('./components/test')
)
}
這個(gè)是我最喜歡的一種用法，封裝表單控件（的子控件）就非常方便了侧但。
另外還可以實(shí)現(xiàn)表單的自定義子控件矢空，比如加一個(gè) 105：你自己寫(xiě)的一個(gè)組件，這樣就可以擴(kuò)展子控件了禀横。
屬性怎么辦屁药？
不同類(lèi)型的組件，需要的屬性也是不一樣的柏锄，那么遍歷的時(shí)候如何給組件的屬性賦值酿箭？
這個(gè)可以使用 v-bind="{}" 的方式來(lái)實(shí)現(xiàn)，把需要的屬性做成一個(gè)對(duì)象就好趾娃。
事件還沒(méi)想好缭嫡，目前只能是統(tǒng)一事件。
插槽也可以支持茫舶，只是需要做一下判斷械巡。
異步組件 defineAsyncComponent
- 加載 xx.vue 文件：
defineAsyncComponent( () =>
import('./components/test.vue')
)
我懷疑 VueRouter 就是用 defineAsyncComponent 來(lái)實(shí)現(xiàn) 異步路由的。
- 加載 xx.js 文件：
defineAsyncComponent( () =>
import('./components/test.js ')
)
js文件的內(nèi)容可以是這樣的。
test.js
export default {
name: 'component-test',
template: `
<div>
<br>
這是 組件測(cè)試<br>
父組件傳遞參數(shù)：{{str}}<br>
setup 獲取參數(shù)：{{str1}}<br>
</div>
`,
props: {
str: String
},
setup(props) {
// 在setup里面獲取參數(shù)值
let str1 = Vue.ref(props.str)
str1.value += '--內(nèi)部改一下讥耗。'
return {
str1
}
}
}
我的在線(xiàn)演示用的都是這種方式有勾，用來(lái)做演示還是很方便的。
- template
模板古程，設(shè)置HTML部分蔼卡。
其他的地方和 .vue 文件是一樣的，當(dāng)然css除外挣磨，還沒(méi)想出了怎么解決css 的問(wèn)題雇逞，因?yàn)椴粫?huì)。茁裙。塘砸。
