詳解Vue.js 作用域、slot用法（單個(gè)slot、具名slot）

更新時(shí)間：2019年10月15日 10:37:44 作者：吳聲子夜歌

這篇文章主要介紹了Vue.js 作用域、slot用法（單個(gè)slot、具名slot）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

作用域

在介紹slot前，需要先知道一個(gè)概念：編譯的作用域。比如父組件中有如下模板：

<child-component>
 {{message}}
<child-component>

這里的message就是一個(gè)slot，但是它綁定的是父組件的數(shù)據(jù)，而不是組件< child-component >的數(shù)據(jù)。

父組件模板的內(nèi)容是在父組件作用域內(nèi)編譯，子組件模板的內(nèi)容是在子組件作用域內(nèi)編譯。

<div id="app">
 <child-component v-show="showChild"></child-component>
</div>
<script>
 Vue.component('child-component',{
 template: '<div>子組件</div>'
 });

 var app = new Vue({
 el: '#app',
 data: {
  showChild: true
 }
 });
</script>

這里的狀態(tài)showChild綁定的是父組件的數(shù)據(jù)，如果想在子組件上綁定，那應(yīng)該是：

<div id="app">
 <child-component></child-component>
</div>
<script>
 Vue.component('child-component',{
 template: '<div v-show="showChild">子組件</div>',
 data: function () {
  showChild: true
 }
 });

 var app = new Vue({
 el: '#app'
 });
</script>

因此，slot分發(fā)的內(nèi)容，作用域是在父組件上的。

slot用法

單個(gè)slot：

在子組件使用特殊的< slot >元素就可以為這個(gè)子組件開啟一個(gè) slot（插槽），在父組件模板里，插入在子組件標(biāo)簽內(nèi)的所有內(nèi)容將替代子組件的< slot >標(biāo)簽及它的內(nèi)容。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <title>單個(gè)slot</title>
</head>
<body>
 <div id="app">
 <cild-component>
  <p>分發(fā)的內(nèi)容</p>
  <p>更多分發(fā)的內(nèi)容</p>
 </cild-component>
 </div>
 <script>
 Vue.component('child-component',{
  template: '\
  <div>\
   <slot>\
   <p>如果父組件沒有插入內(nèi)容，我將作為默認(rèn)出現(xiàn)</p>\
   </slot>\
  </div>'
 });

 var app = new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

子組件child-component的模板內(nèi)定義了一個(gè)< slot >元素，并且用一個(gè)< p >作為默認(rèn)的內(nèi)容，在父組件沒有使用slot時(shí)，會(huì)渲染這段默認(rèn)的文本；如果寫入了slot，那就會(huì)替代整個(gè)< slot >標(biāo)簽。

上面示例渲染后的結(jié)果為：

<div id="app">
 <div>
 <p>分發(fā)的內(nèi)容</p>
 <p>更多分發(fā)的內(nèi)容</p>
 </div>
</div>

注意：子組件< slot >內(nèi)的為備用內(nèi)容，它的作用域是子組件本身。

具名slot：

給< slot >元素指定一個(gè)name后可以分發(fā)多個(gè)內(nèi)容，具名slot可以與單個(gè)slot共存。

<div id="myApp">
 <child-component>
 <h2 slot="header">標(biāo)題</h2>
 <p>正文內(nèi)容</p>
 <p>更多的正文內(nèi)容</p>
 <div slot="footer">底部信息</div>
 </child-component>
</div>
<script>
 Vue.component('child-component',{
 template: '\
  <div class="container">\
  <div class="header">\
   <slot name="header"></slot>\
  </div>\
  <div class="main">\
   <slot></slot>\
  </div>\
  <div class="footer">\
   <slot name="footer"></slot>\
  </div>\
  </div>'
 });

 var myApp = new Vue({
 el: '#myApp'
 });
</script>

子組件內(nèi)聲明了3個(gè)< slot >元素，其中在< div class=“main” > 內(nèi)的 < slot >沒有使用name特性，它將作為默認(rèn)slot出現(xiàn)，父組件沒有使用slot特性的元素與內(nèi)容都將出現(xiàn)在這里。

如果沒有制定默認(rèn)的匿名slot，父組件內(nèi)多于的內(nèi)容片斷都將被拋棄。

渲染結(jié)果：

<div class="container">
 <div class="header">
 <h2>標(biāo)題</h2>
 </div>
 <div class="main">
 <p>正文內(nèi)容</p>
 <p>更多的正文內(nèi)容</p>
 </div>
 <div class="footer">
 <div slot="footer">底部信息</div>
 </div>
</div>

總結(jié)

以上所述是小編給大家介紹的Vue.js 作用域、slot用法（單個(gè)slot、具名slot）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: