第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

此間少年_ · 更新于 2020-04-21

1. 前言

本小節(jié)我們將介紹如何使用插槽slot，包括默認插槽、具名插槽、作用域插槽。插槽可以使組件的模版變得多樣性，讓用戶在使用組件時可以自定義傳入模版內容。在復雜組件中，當我們在使用多個插槽的時候將會是一個難點。但是也不必擔心，只要我們將每個插槽類型的使用方法學透，相信面對任何復雜插槽的使用的時候都可以游刃有余。

2. 慕課解釋

Vue 實現(xiàn)了一套內容分發(fā)的 API，將 元素作為承載分發(fā)內容的出口。 —— 官方定義

<slot>元素作為承載分發(fā)內容的出口，可以理解為一個占位符，或者說是子組件暴露的一個讓父組件傳入自定義內容的接口。插槽內可以包含任何模板代碼，包括 HTML，甚至其他的組件。在工作中如果你的組件內的內容是可變的，這個時候我們可以考慮使用插槽。

3. 插槽的類型

<slot>有三種類型，他們分別是：

  • 默認插槽 default
  • 具名插槽 name
  • 作用域插槽 v-slot

接下來，我們將一步步介紹這三種不同插槽的使用方式。

3.1 默認插槽的使用

在自定義組件中使用<slot />標簽進行占位，當我們使用該組件時，在組件標簽內寫入需要展示的具體內容：

{
  components: {
    'MyConponent': {
      template: '<div><slot /></div>'
    }
  }
}
<my-conponent>這里是要顯示的插槽內容！</my-conponent>

我們用一個簡單的示例來學習以下如何使用默認插槽：

實例演示
預覽 復制
復制成功！
<!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">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component>
      句號
    </my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div>Hello ！<slot></slot></div>'
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 JS 代碼第 3-5 行，我們通過 Vue.Component 注冊了全局組件 myComponent，并在組件內部使用了默認插槽 slot，在 html 中使用插槽（代碼 2-4 行），并在標簽內傳入組件內需要展示的插槽內容。

3.2 具名插槽的使用

具名插槽就是給<slot />標簽加上 name 屬性。語法：<my-component><slot name="插槽名字"/></my-component>

{
  components: {
    'MyConponent': {
      template: '<div><slot name="hello"/></div>'
    }
  }
}
<my-conponent>
  <template slot="hello"></template>
</my-conponent>

我們用一個簡單的示例，來學習一下如何使用具名插槽：

實例演示
預覽 復制
復制成功！
<!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">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component>
      <span slot="name">句號</span>
      <span slot="time">2020-02-02</span>
    </my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div>Hello ！<slot name="name"></slot> <slot name="time"></slot></div>'
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 JS 代碼第 4-6 行，我們通過 Vue.Component 注冊了全局組件 myComponent，并在組件內部使用了兩個具名插槽 name 和 time，在 html 中使用具名插槽（代碼 2-5 行），并在標簽內傳入組件需要展示的插槽內容。

3.3 作用域插槽的使用

有時候，我們在父組件使用插槽時需要訪問子組件中的數(shù)據(jù)，這時候就需要使用作用域插槽。用法：將 data 變量名 作為 <slot> 元素的一個 attribute 綁定上去：

<slot :[自定義變量名]="[需要傳入的數(shù)據(jù)]"></slot>
<!-- 示例 -->
<slot :count="count"></slot>
```，
在使用組件時，通過`v-slot:插槽名字="數(shù)據(jù)別名"`的方式使用。
```html
<!-- 默認插槽中使用作用域插槽 -->
<my-component>
  <template v-slot:default="slotProps">
    {{slotProps.count}}
  </template>
</my-component>

<!-- 具名插槽中使用作用域插槽 -->
<my-component>
  <template v-slot:插槽名字="slotProps">
    {{slotProps.count}}
  </template>
</my-component>

下面我們通過兩個例子詳細介紹，如何在默認插槽和具名插槽中，使用作用域插槽。

3.3.1 默認插槽中使用作用域插槽

對于默認插槽我們可以省略v-slot后面的插槽名，直接使用v-slot="數(shù)據(jù)別名"的方式：
示例：

實例演示
預覽 復制
復制成功！
<!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">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component>
          <!-- 使用 v-slot 接收默認插槽的數(shù)據(jù)，并把數(shù)據(jù)命名為  slotProps-->
          <template v-slot:default="slotProps">
            <br />
            <!-- 使用 插槽數(shù)據(jù)-->
            我叫：{{slotProps.detail.name}}，我的愛好是：{{slotProps.detail.love}}
          </template>
        </my-component>
        <my-component>
          <!-- 默認插槽可以忽略v-slot后面的插槽名-->
          <template v-slot="slotProps">
            <br />
            <!-- 使用 插槽數(shù)據(jù)-->
            我叫：{{slotProps.detail.name}}，我的愛好是：{{slotProps.detail.love}}
          </template>
        </my-component>
      </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    // 在默認插槽中傳入數(shù)據(jù) detail
    template: '<div>Hello ！<slot :detail="detail"></slot></div>',
    data() {
      return {
        detail: {
          name: '句號',
          love: 'coding'
        }
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 JS 代碼第 3-14 行，我們通過 Vue.Component 注冊了全局組件 myComponent。

在 HTML 代碼第 2-8 行，使用 v-slot:default=“數(shù)據(jù)別名” 的方式接收默認插槽的數(shù)據(jù)，并把數(shù)據(jù)命名為 slotProps。

在 HTML 代碼第 9-16 行，使用 v-slot=“數(shù)據(jù)別名” 的方式接收默認插槽的數(shù)據(jù)（省略默認插槽名），并把數(shù)據(jù)命名為 slotProps。

3.3.2 具名插槽中使用作用域插槽

具名插槽必須在v-slot后面加上插槽名，否則數(shù)據(jù)無法在具名插槽中使用：
示例：

實例演示
預覽 復制
復制成功！
<!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">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component>
          <!-- 使用 v-slot 接收具名插槽 detail 的數(shù)據(jù)，并把它命名為  slotProps-->
          <template v-slot:detail="slotProps">
            <br />
            <!-- 使用 插槽 detail 的數(shù)據(jù)-->
            我叫：{{slotProps.detail.name}}，我的愛好是：{{slotProps.detail.love}}
          </template>
        </my-component>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    // 定義具名插槽 detail 并傳入數(shù)據(jù) detail
    template: '<div>Hello ！<slot :detail="detail" name="detail"></slot></div>',
    data() {
      return {
        detail: {
          name: '句號',
          love: 'coding'
        }
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

在 JS 代碼第 3-14 行，我們通過 Vue.Component 注冊了全局組件 myComponent。
在 HTML 代碼第 2-8 行，使用 v-slot:default=“數(shù)據(jù)別名” 的方式接收默認插槽的數(shù)據(jù)，并把數(shù)據(jù)命名為 slotProps。

4. 小結

在本小節(jié)，我們介紹了組件中插槽的一些使用方法，主要有以下知識點：

  • 通過標簽 使用默認插槽；
  • 通過給標簽 添加一個 name 的 attribute 來命名插槽；
  • 通過作用域插槽 v-slot 讓父組件可以訪問到子組件中的數(shù)據(jù)。