slot
插槽的作用:父组件想将结构和样式一起传递给子组件
匿名插槽
父组件
<Nav>
<ul slot>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</Nav>
<slot></slot>
具名插槽
<Nav>
<ul slot="n1">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul slot="n2">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</Nav>
<slot name="n1"></slot>
<slot name="n2"></slot>
作用域插槽
使用的场景:数据在子组件,但是结构和样式,通过父组件传递给子组件
<Nav>
<div slot-scope="scope"></div>
{{scope.title}}
</Nav>
<slot :title="title"></slot>
data() {
return {
title: 'zs'
}
}
生命周期函数
我们说一下比较常见的
created //data 和el加载完毕 dom节点还未加载 mounted //data 和el加载完毕 dom节点加载完毕 (获取dom节点需要在这,不能在created中) updated // 更新 destoryed // 组件被销毁
|