亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue slot插槽的使用詳情

 更新時間：2021年10月27日 10:13:55   作者：Silent丿丶黑羽  
這篇文章主要介紹了Vue slot插槽的使用，在生活中很多地方都有插槽，電腦usb的插槽，插板當中的電源插槽，插槽的目的是為了讓我們原來的設備具備更多的擴展性比如電腦的USB我們可以插入U盤，手機，鼠標，鍵盤等等，下面文章就來介紹Vue slot插槽是如何使用的

1、為什么使用slot

1.1 slot(插槽)

  • 在生活中很多地方都有插槽，電腦usb的插槽，插板當中的電源插槽
  • 插槽的目的是為了讓我們原來的設備具備更多的擴展性
  • 比如電腦的USB我們可以插入U盤，手機，鼠標，鍵盤等等

1.2 組件中的插槽

  • 組件的插槽也是為了讓我們的組件更具有擴展性
  • 讓使用者決定組件內部的一些內容到底展示什么

1.3 例子

  • 移動開發(fā)中，幾乎每個頁面都有導航欄
  • 導航欄我們必然封裝成一個插件
  • 一旦有了這個組件，我們就可以在多個頁面中復用了

2、如何封裝這類組件（slot）

  • 最好的封裝方式就是將共性抽取到組件中，將不同的部分暴露為插槽
  • 一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什么內容
  • 是搜索框，是文字，是按鈕，由調度者自己決定

3、 插槽的案例

<div id="app">
  <cpn><button>按鈕</button></cpn>
  <cpn><p>hello world</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是組件</h2>
    // 插槽預留的位置，方便使用者自己填寫
    <slot></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
      }
    }
  })
</script>

上述代碼干了以下事情：

  • 1.定義了子組件cpn，然后在子組件中預留了一個插槽，插槽的內容由用戶填寫
  • 2.父組件中使用了3次子組件，3個子組件分別給插槽填寫了不同的內容

最后展示效果如下：

 

4、插槽默認值

如果我們需要大量使用這個組件，而且組件預留的插槽，我們大多數(shù)都是填寫的返回按鈕，只有極少數(shù)填寫其他的，那么這種情況就可以為插槽設置一個默認值

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot><button>返回</button></slot>
  </div>
</template>

我們在子組件中設置了一個默認值為返回按鈕的插槽，那么父組件在使用時如果不填寫任何內容，那么默認就是返回按鈕

5、具名插槽

有時我們需要多個插槽。例如對于一個帶有如下模板的組件：

<template id="cpn">
  <div>
    <slot name="header"><span>頭部</span></slot>
    <slot name="main"><span>中間</span></slot>
    <slot name="footer"><span>頁腳</span></slot>
  </div>
</template>

我們在組件中預留了3個插槽，但是這里指定了3個名字，后續(xù)父組件使用v-slot指定name屬性后就能填寫自己的內容，比如如下代碼

<div id="app">
  <cpn>
    <template v-slot:header>
      <p>header頭部</p>
    </template>
    <template v-slot:footer>
      <p>footer頁腳</p>
    </template>
  </cpn>
</div>

使用了cpn組件，然后指定了插槽name屬性為header和footer的內容，指定后自己填寫的內容就會替換默認的內容。

注意：這里的語法格式是固定的，必須在使用template標簽上綁定v-slot:插槽的名字

6、編譯作用域

通過外面?zhèn)鹘o組件的變量，在以后使用插槽的時候是不能使用的

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            isShow: false
          }
        }
      }
    }
  })
</script>

上面我們定義了子組件cpn，子組件中有屬性isShow，app實例中也定義了屬性isShow，最后使用子組件cpn時使用了v-show，當值為true顯示，值為false不顯示
問題：v-show中的isShow的值是實例中的true還是子組件中的false
答案：是true，因為你使用的時候是在app實例范圍內，所以isShow會去從實例中的data去查找，雖然你是在cpn子組件中綁定的，但是這里的cpn你只需要把他當做普通的標簽即可，如果你想讓isShow的值為false，那么你只需要在子組件的template模板中使用<p v-show="isShow">hello</p>

7、作用域插槽

默認在插槽中的代碼只能使用全局Vue中的屬性，如果想要使用自定義組件中的屬性，那么需要在定義slot的時候使用v-bind來進行綁定。

<div id="app">
  <cpn>
    <template v-slot:default="slot">
      {{slot.data.firstName}}
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="user">
      {{user.lastname}}
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            "user": {
              "firstName": "甲",
              "lastname": "殼蟲"
            }
          }
        }
      }
    }
  })
</script>

上述代碼做了如下幾件事情:

  • 1.定義了子組件cpn，在子組件中定義了user
  • 2.在子組件cpn的模板的插槽中綁定了屬性data，且插槽的默認值為user.lastname
  • 3.在html中使用了子組件，并使用v-slot綁定了插槽Prop對象，這樣就可以通過對象名稱.子組件中綁定的屬性名稱(slot.data)，來訪問子組件中的數(shù)據

到此這篇關于Vue slot插槽的使用詳情的文章就介紹到這了,更多相關Vue slot插槽的使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論