一篇看懂vue.js內容分發

vue.js內容分發把組件上下文的內容注入到組件。

定義解析

如今咱們看一個架空的例子，幫助理解剛剛說過的嚴謹而難懂的定義。假設有一個組件名爲my-component，其使用上下文以下：

<my-component>
    <p>hi,slots</p>
  </my-component>

再假設此組件的模板爲：

<div>
    <slot></slot>
  <div>

那麼注入後的組件HTML至關於：

<div>
     <p>hi,slots</p>
  <div>

標籤<slot>會把組件使用上下文的內容注入到此標籤所佔據的位置上。組件分發的概念簡單而強大，由於它意味着對一個隔離的組件除了經過屬性、事件交互以外，還能夠注入內容。

此案例變成能夠執行的代碼，就是這樣的：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
  <my-component>
    <p>hi,slots</p>
  </my-component>  
</div>
<script>
   Vue.component('my-component', {
      template: `
      <div>
        <slot></slot>
      <div>
    `
    });


    new Vue({
      el: "#app"
  });
</script>

一個組件若是須要外部傳入簡單數據如數字、字符串等等的時候，可使用property，若是須要傳入js表達式或者對象時，可使用事件，若是但願傳入的是HTML標籤，那麼使用內容分發就再好不過了。因此，儘管內容分發這個概念看起來極爲複雜，而實際上能夠簡化了解爲把HTML標籤傳入組件的一種方法。因此歸根結底，內容分發是一種爲組件傳遞參數的方法。

命名插槽

剛剛的案例經過slot標籤，一股腦的把組件上下文的內容所有注入到組件內的規定位置。vue.js也提供了命名插槽（named slot）的技術，能夠把上下文內的內容分紅多個有名字的部分，而後插入到組件的不一樣位置：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
  <my-component>
    <p slot='slot1'>hi,slot1</p>
    <p slot='slot2'>hi,slot2</p>
  </my-component>  
</div>
<script>
   Vue.component('my-component', {
      template: `
      <div>
        <slot name='slot1'></slot>
        <slot name='slot2'></slot>
      <div>
    `
    });

    new Vue({
      el: "#app"
  });
</script>

此案例使用了兩個插槽分別爲slot1，slot2，而且把它們放到組件的不一樣位置。

綜合案例

如今咱們看一個高級的案例，我來作一個即時貼(sticky)組件，用來顯示一個有標題和主體的即時貼。組件會定義好即時貼的結構，外觀，而具體的標題和內容，而使用內容分發技術傳入的HTML標籤：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
  <sticky>
    <div slot="title">
    <h3>Title</h3></div>
    <div slot="body"><p>
      Body foo bar baz  ddd
    </p></div>
  </sticky>
</div>
<script>
  Vue.component('sticky', {
    template: `
  <div>
    <div class="wrapper">  
      <div>
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="body">
            <slot name="body"></slot>
        </div>
      </div>
    </div>
  </div>`
});

new Vue({
    el: "#app"
});
</script>
<style>
.wrapper {
  display: flex;
  width: 180px;
  height: 150px;
  background: yellow;
  border-radius: 10px;
}

.title {
  border-bottom:1px solid red
}
.body {
  border-bottom:1px solid blue
}
</style>

本案例內，使用上下文經過屬性slot建立了兩個插槽，分別爲title和body，在組件的模板內（template成員）經過<slot>標籤的name屬性引用title和body，並把它注入且放入到合適的位置上。

關於

做者：劉傳君

建立過產品，創過業。好讀書，求甚解。
能夠經過 1000copy#gmail.com 聯繫到我

出品

bootstrap小書 https://www.gitbook.com/book/...
http小書 http://www.ituring.com.cn/boo...
Git小書 http://www.ituring.com.cn/boo...