作用域HEi免費資源網

在介紹slot前，需要先知道一個概念：編譯的作用域。比如父組件中有如下模板：HEi免費資源網

{{message}}

這里的message就是一個slot，但是它綁定的是父組件的數據，而不是組件< child-component >的數據。HEi免費資源網

父組件模板的內容是在父組件作用域內編譯，子組件模板的內容是在子組件作用域內編譯。HEi免費資源網

Vue.component('child-component',{

template: '

子組件'

});

var app = new Vue({

el: '#app',

data: {

showChild: true

}

});

這里的狀態showChild綁定的是父組件的數據，如果想在子組件上綁定，那應該是：HEi免費資源網

Vue.component('child-component',{

template: '

子組件',

data: function () {

showChild: true

}

});

var app = new Vue({

el: '#app'

});

因此，slot分發的內容，作用域是在父組件上的。HEi免費資源網

slot用法HEi免費資源網

單個slot：HEi免費資源網

在子組件使用特殊的< slot >元素就可以為這個子組件開啟一個 slot(插槽)，在父組件模板里，插入在子組件標簽內的所有內容將替代子組件的< slot >標簽及它的內容。HEi免費資源網

單個slot

分發的內容

更多分發的內容

Vue.component('child-component',{

template: '\

\

\

如果父組件沒有插入內容，我將作為默認出現

\

\

'

});

var app = new Vue({

el: '#app'

});

子組件child-component的模板內定義了一個< slot >元素，并且用一個< p >作為默認的內容，在父組件沒有使用slot時，會渲染這段默認的文本；如果寫入了slot，那就會替代整個< slot >標簽。HEi免費資源網

上面示例渲染后的結果為：HEi免費資源網

分發的內容

更多分發的內容

注意：子組件< slot >內的為備用內容，它的作用域是子組件本身。HEi免費資源網

具名slot：HEi免費資源網

給< slot >元素指定一個name后可以分發多個內容，具名slot可以與單個slot共存。HEi免費資源網

標題

正文內容

更多的正文內容

底部信息

Vue.component('child-component',{

template: '\

\\

\

\\

\

\\

\

\'

});

var myApp = new Vue({

el: '#myApp'

});

子組件內聲明了3個< slot >元素，其中在< div class=“main” > 內的 < slot >沒有使用name特性，它將作為默認slot出現，父組件沒有使用slot特性的元素與內容都將出現在這里。HEi免費資源網

如果沒有制定默認的匿名slot，父組件內多于的內容片斷都將被拋棄。HEi免費資源網

渲染結果：HEi免費資源網

標題

正文內容

更多的正文內容

底部信息

以上所述是小編給大家介紹的Vue.js 作用域、slot用法(單個slot、具名slot),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！HEi免費資源網

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！HEi免費資源網

總結

以上是生活随笔為你收集整理的slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。