一、组件细节点
- 子组件中的data,一定是个方法哈
- 父组件要传递给孙子组件(瞎说的孙子组件,哈哈哈),可以使用provide与inject直接传递,下面是代码
//父组件
provide() {
return {
data,
}
}
//子组件
inject: ['data'],
二、动态组件
感觉就和slot类似,只不过反转来,在父组件中留位置,子组件传递过来,上代码。
父组件中
<div>
<component :is="which"/>
</div>
也就是说component是预留的位置,which是那个子组件,component就替换为那个子组件
- keep-alive可以缓存动态组件的信息,每次切换时候,上一次信息被记录起来
异步组件
- 意义:可以通过异步的方式加载子组件,而不是直接加载完。
注册异步组件
app.component('async-common-item', Vue.defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
template: `<div>this is an async component</div>`
})
}, 4000)
})
}))