vue.js中slot有什么用

這篇文章給大家分享的是有關(guān)vue.js中slot有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vuejs slot的使用方法：1、在子組件內(nèi)放一些DOM；2、通過slot實(shí)現(xiàn)顯示或者隱藏DOM，代碼如“new Vue({el: "#app",data: {},components:{children:{...}}}) ”。

本文操作環(huán)境：Windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs中slot的使用

概述：

假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示或者隱藏，在哪個地方顯示，怎么顯示，需要slot分發(fā)負(fù)責(zé)。

分以下幾種情況分發(fā)：

<p class="" id="app">
    <children>
      <span>我是slot內(nèi)容</span>   <!--這行不會顯示-->
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          
        template: "<button>為了明確作用范圍，所以使用button標(biāo)簽</button>"
        }
      }
    })  </script>

顯示結(jié)果為：span標(biāo)簽內(nèi)的內(nèi)容并沒有顯示。

單個slot：

<p class="" id="app">
    <children>
      <span>我是slot內(nèi)容</span>
      <!--這行不會顯示-->
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          
        template: "<button><slot></slot>為了明確作用范圍，所以使用button標(biāo)簽</button>"
        }
      }
    })  </script>

即父組件放在子組件里的內(nèi)容，插到了子組件<slot></slot>位置；
注意：即使有多個標(biāo)簽，會一起被插入，相當(dāng)于在父組件放在子組件里的標(biāo)簽，替換了<slot></slot>這個標(biāo)簽。
例如：<p class="" id="app">
    <children>
      <span>我是slot內(nèi)容</span>
      <p>測試測試</p>
      <em>我是測試的</em>
      <!--這行不會顯示-->
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {

      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<button><slot></slot>為了明確作用范圍，所以使用button標(biāo)簽</button>"
        }
      }
    })  </script>

D：具名slot：將放在子組件里的不同html標(biāo)簽放到不同位置，父組件在要發(fā)布的標(biāo)簽里添加slot=”name名”屬性，子組件在對應(yīng)分發(fā)的位置的slot標(biāo)簽里，添加name=”name名”屬性，然后就會將對應(yīng)的標(biāo)簽放在對應(yīng)位置了。
例如：<p class="" id="app">
    <children>
      <span slot="first">12345</span>
      <span slot="third">56789</span>
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<button><slot name='first'></slot>為了明確作用范圍<slot name='third'></slot>所以使用button標(biāo)簽</button>"
        }
      }
    })  </script>

E:分發(fā)內(nèi)容的作用域：
被分發(fā)的內(nèi)容的作用域，根據(jù)其所在模塊決定，例如：<p class="" id="app">
    <children>
      <span slot="first" @click="test()">12345</span>
      <span slot="third">56789</span>
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<button><slot name='first'></slot>為了明確作用范圍<slot name='third'></slot>所以使用button標(biāo)簽</button>"
        }
      },
      methods: {
        test: function() {
          console.log("我是first點(diǎn)擊打印的內(nèi)容");
        }
      }
    })  </script>點(diǎn)擊按鈕12345的區(qū)域時（而不是全部按鈕），會觸發(fā)父組件的test方法，然后打印“我是first點(diǎn)擊打印的內(nèi)容”。但是點(diǎn)擊其他區(qū)域則沒有影響。

F:當(dāng)沒有分發(fā)內(nèi)容時的提示：假如父組件沒有在子組件中放置有標(biāo)簽，或者是父組件在子組件中放置標(biāo)簽，但有slot屬性，而子組件中沒有slot屬性的標(biāo)簽。那么子組件的slot標(biāo)簽，將不會起任何作用。除非，該slot標(biāo)簽內(nèi)有內(nèi)容，那么在無分發(fā)內(nèi)容的時候，會顯示該slot標(biāo)簽內(nèi)的內(nèi)容。
例如：<p class="" id="app">
    <children>
      <span slot="last">【12345】</span>
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<p><slot name='first'><button>【沒內(nèi)容顯示1】</button></slot>為了明確作用范圍，<slot name='last'><button>【沒內(nèi)容顯示2】</button></slot>所以使用button標(biāo)簽</p>"
        }
      }
    })  </script>

如果改為：<p class="" id="app">
    <children>
      <span slot="first">【12345】</span>
    </children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<p><slot name='first'><button>【沒內(nèi)容顯示1】</button></slot>為了明確作用范圍，<slot name='last'><button>【沒內(nèi)容顯示2】</button></slot>所以使用button標(biāo)簽</p>"
        }
      }
    })  </script>

說明：a、name=”first”的slot標(biāo)簽被父組件對應(yīng)的標(biāo)簽所替換（slot標(biāo)簽內(nèi)部的內(nèi)容被舍棄）
b、name=”last”的slot標(biāo)簽，因?yàn)闆]有對應(yīng)內(nèi)容，則顯示該slot標(biāo)簽內(nèi)部的內(nèi)容。

G、假如想控制子組件根標(biāo)簽的屬性【1】首先，由于模板標(biāo)簽是屬于父組件的，因此，將子組件的指令綁定在模板標(biāo)簽里，是不可以的（因?yàn)槠錃w屬于父組件）
【2】假如需要通過父組件控制子組件是否顯示（例如v-show或v-if），那么這個指令顯然是屬于父組件的，可以將標(biāo)簽寫在子組件的模板上。例如：<p class="" id="app">
    <button @click="toshow">點(diǎn)擊讓子組件顯示</button>
    <children v-if="abc"></children>
  </p>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        abc: false
      },
      methods: {
        toshow: function() {          this.abc = !this.abc;
        }
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<p>這里是子組件</p>"
        }
      }
    })  </script>

點(diǎn)擊之后：

說明：通過父組件（點(diǎn)擊按鈕，切換v-if指令的值）控制子組件是否顯示。
【3】假如需要通過子組件，控制子組件是否顯示（比如隱藏）那么這個指令顯然是屬于子組件的（會將值放在子組件的data屬性下）那么就必須放置在子組件的根標(biāo)簽中。
例如：<p class="" id="app">
    <button @click="toshow">點(diǎn)擊讓子組件顯示</button>
    <children>
      <span slot="first">【12345】</span>
      <!--上面這行不會顯示-->
    </children>
  </p>

  <script type="text/javascript">
    new Vue({
      el: "#app",
      methods: {
        toshow: function() {          this.$children[0].tohidden = true;
        }
      },
      components: {
        children: { //這個無返回值，不會繼續(xù)派發(fā)          template: "<p v-if='tohidden' @click='tohide'>這里是子組件</p>",
          data: function() {            return {
              tohidden: true
            }
          },
          methods: {
            tohide: function() {              this.tohidden = !this.tohidden;
            }
          }
        }
      }
    })  </script>

點(diǎn)擊“這里是子組件”之后：

點(diǎn)擊“點(diǎn)擊讓子組件顯示”：
說明：

點(diǎn)擊子組件會讓子組件消失
點(diǎn)擊父組件的按鈕，通過更改子組件的tohidden屬性，讓子組件重新顯示。
子組件的指令綁定在子組件的模板之中（如此才能調(diào)用）。

感謝各位的閱讀！關(guān)于“vue.js中slot有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！