一帆啃、slot定義
中文插槽彩匕，混合父組件的內(nèi)容與子組件自已模板的方式
其中 Vuejs 把 slot 元素作為原始內(nèi)容的插槽
二财松、編譯作用域
//父組件
<div id="app">
<my-component>{{msg}}</my-component>
</div> //msg綁定到是父組件的內(nèi)容
//子組件
...
components:{
'my-component':{
template:'<div></div>'
}
}
...
小總結(jié)：
父組件模板內(nèi)容在父組件作用域內(nèi)編譯
子組件模板內(nèi)容在子組件作用域內(nèi)編譯
三辽聊、slot用法
1?單個插槽
//html
...
<my-component>我是父組件內(nèi)容</my-component>
//js
...
template:'<div>\
<slot>\
如果沒有內(nèi)容顯示痴脾，默認(rèn)是我\
</slot>\
</div>'
...
2?具名插槽
//html
...
具名插槽（有具體名字的插槽）: 視圖不變颤介，數(shù)據(jù)變
<name-component>
<h3 slot="header">我是標(biāo)題</h3>
<p>我是正文內(nèi)容</p>
<p>正文內(nèi)容有兩段</p>
<p slot="footer">我是底部信息</p>
</name-component>
//js
...
'name-component':{
template:'<div>\
<div class="header">\n' +
' <slot name="header">' + //取出name是 header 對應(yīng)的內(nèi)容
'</slot>\n' +
' </div>\n' +
' \n' +
' <div class="container">\n' +
' <slot>' + // 沒加 name 會把默認(rèn)的取回來
'</slot>\n' +
' </div>\n' +
'\n' +
' <div class="footer">\n' +
' <slot name="footer">' + //取出name是footer對應(yīng)的內(nèi)容
'</slot>\n' +
' </div>' +
'</div>'
}
}
【Demo實例https://jsbin.com/jijelop/edit?html,output】
四?作用域插槽
使用一個可以復(fù)用的模板來替換已經(jīng)渲染的元素(從子組件中獲取數(shù)據(jù))
注：template模板不會被渲染，渲染的是template標(biāo)簽內(nèi)的內(nèi)容 (v2.5.0版本之前)
//html
...
<my-component>
<template slot="abc" slot-scope="prop">
{{ prop.text}}
</template>
//v2.5.0版本后,可在別的標(biāo)簽(比如p,span,div等)上用 slot,slot-scope赞赖，并渲染標(biāo)簽
<p slot="abc" slot-scope="prop">
{{prop.text}}
</p>
</my-component>
//js
...
components:{
'my-component':{
template:'<div>\
<slot text="我是來自子組件" name="abc">\
</slot>\
</div>'//在子組件定義一個slot滚朵，寫上要傳遞的數(shù)據(jù)
}
}
【Demo實例https://jsbin.com/hawodox/edit?html,output】
五、訪問slot
通過 this.$slots.name 訪問
//html
...
<name-component>
<h3 slot="header"><span>我是標(biāo)題</span></h3>
</name-component>
//js
...
mounted:function(){
// 訪問插槽
var header = this.$slots.header
var text = header[0].elm.innerText
var html = header[0].elm.innerHTML
console.log(header)
console.log(text)
console.log(html)
}
【Demo實例https://jsbin.com/zarewac/edit?html,console,output】
六前域、組件高級用法-動態(tài)組件
component元素 （vue 提供）
1?作用
動態(tài)掛載不同組件
2?實現(xiàn)
使用is屬性實現(xiàn)
//html
...
<button @click="handleView('A')">第1句</button>
<button @click="handleView('B')">第2句</button>
<button @click="handleView('C')">第3句</button>
<button @click="handleView('D')">第4句</button>
//js
...
components:{
'compA':{
template:'<div>離離原上草</div>'
},
'compB':{
template:'<div>一歲一枯榮</div>'
},
'compC':{
template:'<div>野火燒不盡</div>'
},
'compD':{
template:'<div>春風(fēng)吹又生</div>'
}
},
methods:{
handleView:function(tag){
this.thisView = 'comp' + tag
}
}
data:{
thisView:'compA'
}
