首頁 > web前端 > js教程 > 主體

vue組件使用slot分發內容步驟詳解

php中世界最好的语言
發布: 2018-05-25 15:28:20
原創
1739 人瀏覽過

這次帶給大家vue組件使用slot分發內容步驟詳解,vue組件使用slot分發內容的注意事項有哪些,下面就是實戰案例,一起來看一下。

一、什麼是slot

在使用元件時,我們常常要這樣組合它們:

<app>
 <app-header></app-header>
 <app-footer></app-footer>
</app>
登入後複製

當需要讓元件組合使用,混合父元件的內容與子元件的模板時,就會用到slot , 這個過程叫作內容分發( transclusion )。

注意兩點:

1.< app>元件不知道它的掛載點會有什麼內容。掛載點的內容是由<app >的父組件決定的。

2. 元件很可能有它自己的範本。

props 傳遞資料、events 觸發事件和slot 內容分發就構成了Vue 元件的3 個API 來源,再複雜的元件也是由這3 部分構成的。

 二、作用域

<child-component>
 {{ message }}
</child-component>
登入後複製

這裡的message 就是一個slot ,但它綁定的是父元件的數據,而不是元件<child-component>的數據。

父元件模板的內容是在父元件作用域內編譯,子元件模板的內容是在子元件作用域內編譯。如:

   <p id="app15">
      <child-component v-show="showChild"></child-component>
    </p>
Vue.component('child-component',{
  template: '<p>子组件</p>'
});
var app15 = new Vue({
  el: '#app15',
  data: {
    showChild: true
  }
});
登入後複製

這裡的狀態showChild 綁定的是父元件的數據,如果想在子元件上綁定,那應該是:

    <p id="app15">
      <child-component></child-component>
    </p>
Vue.component('child-component',{
  template: '<p v-show="showChild">子组件</p>',
  data: function(){
    return {
      showChild: true
    }
  }
});
登入後複製

因此, slot 分發的內容,作用域是在父元件上的。

三、slot用法

#3.1 單一slot

##在子元件內使用特殊的<slot>元素就可以為這個子元件開啟一個slot(插槽),在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的 標籤及它的內容。

 <p id="app16">
      <my-component16>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
      </my-component16>
    </p>
Vue.component('my-component16',{
  template: '<p>' +
        '<slot><p>如果父组件没有插入内容,我将作为默认出现<</p></slot>' +    //预留的slot插槽
       '</p>'
});
var app16 = new Vue({
  el: '#app16'
});
登入後複製
渲染結果為:

<p id=”app16”>
  <p>
    <p>分发的内容<p>
    <p>更多分发的内容<p>
  </p>
</p>
登入後複製
 子元件

child-component 的範本內定義了一個<slot>元素,並且用一個<p>作為預設的內容,當父元件沒有使用slot 時,會渲染這段預設的文字;如果寫入了slot, 那就會替換整個<slot> 。

3.2具名slot

給<slot> 元素指定一個name 後可以分發多個內容,具名Slot 可以與單一slot 共存。

  <p id="app17">
      <my-component17>
        <h3 slot="header">标题</h3>
        <p>正文内容</p>
        <p>更多正文内容</p>
        <h3 slot="footer">底部信息</h3>
      </my-component17>
    </p>
Vue.component('my-component17',{
  template: '<p class="container">' +
         '<p class="header">' +
          '<slot name="header"></slot>' +
         '</p>' +
         '<p class="main">' +
          '<slot></slot>' +
         '</p>'+
         '<p class="footer">' +
          '<slot name="footer"></slot>' +
         '</p>'+
       '</p>'
});
var app17 = new Vue({
  el: '#app17'
});
登入後複製
渲染結果為:         

 <p id="app17">
        <p class="container">
          <p class="header">
            <h3>标题</h3></p>
          <p class="main"> 
            <p>正文内容</p> 
            <p>更多正文内容</p> 
          </p>
          <p class="footer">
            <h3>底部信息</h3>
          </p>
        </p>
      </p>
登入後複製
 子元件內宣告了3 個<s lot>元素,其中在<p class=」 main >內的<slotname> ,它將作為預設slot 出現,父元件沒有使用slot 特性的元素與內容都會出現在這裡。

四、作用域插槽

作用域插槽是一種特殊的slot ,使用一個可以重複使用的模板來取代己渲染元素。資料傳到了插槽。 ##,就像v-for= ” item in items

裡面的item 一樣,template 內可以透過臨時變數props存取來自子元件插槽的資料msg 。

下面看下Vue元件中slot的用法

#主要是讓元件的可擴充性更強。 1. 使用匿名slot

2. 給slot加個名字

如果不在有slot的元件裡加入任何標籤,slot什麼都不會顯示的。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼搭建vue2.0 boostrap專案

怎麼對webpack模組進行熱替換

以上是vue組件使用slot分發內容步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板