Vue具名插槽與作用域插槽怎么使用

這篇文章主要介紹了Vue具名插槽與作用域插槽怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue具名插槽與作用域插槽怎么使用文章都會有所收獲，下面我們一起來看看吧。

一、什么是插槽

1、插槽就是子組件中的提供給父組件使用的一個占位符，在子組件中用< slot>< /slot > 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的< slot>< /slot >標簽。（簡單來說就是在子組件中挖個坑讓別人來跳）

2、在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 統一替代。

3、插槽包括默認插槽、具名插槽和作用域插槽

二、前期準備

1、通過vue-cli創建好初始化項目
2、src下創建category.vue，同時在App.vue中引入

三、具名插槽的使用

1.子組件配置slot

在子組件中配置好props，接收從父組件App傳來的信息以及準備兩個slot插槽：

//category.vue
<template>
  <div id="bck">
    <h4>{{ title }}</h4>
    //準備兩個帶有不同name的插槽（可以讓使用者在指定的地方顯示數據）
    <slot name="center">默認插槽1</slot>
    <slot name="footer">默認插槽2</slot>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {};
  },
  props: ["title", "listData"],
};
</script>

<style scoped>
#bck {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4 {
  text-align: center;
  background-color: #bfa;
}
</style>

2.使用者App.vue配置數據

通過在子組件category定義的不同的name，可以讓數據在指定的位置顯示：

//App.vue
<template>
  <div id="app">
    <category title="美食">
      <img
        slot="center"
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.wwyQPKyRH0ge8-Ppd9DSJgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt=""
      />
      <a slot="footer" href="https://img1.qunarzz.com/travel">更多</a>
    </category>
    <category title="游戲">
      <ul slot="center">
        <li v-for="(g, index) in game" :key="index">{{ g }}</li>
      </ul>
      <div id="game" slot="footer">
        <a href="https://img1.qunarzz.com/travel">單機游戲</a>
        <a href="https://img1.qunarzz.com/travel">網絡游戲</a>
      </div>
    </category>
    <category title="電影">
      <video
        slot="center"
        width=""
        height=""
        controls
        src="https://v.qq.com/x/cover/mzc00200dwnknik.html"
      ></video>
      <div id="game" slot="footer">
        <a href="https://img1.qunarzz.com/travel">更多信息1</a>
        <a href="https://img1.qunarzz.com/travel">更多信息2</a>
      </div>
    </category>
  </div>
</template>

<script>
import category from "./components/category";

export default {
  name: "app",
  data() {
    return {
      foods: ["麻辣燙", "燒烤", "小青龍", "炸醬面"],
      game: ["魔獸世界", "FIFA2016", "NBA2K", "洛克王國"],
    };
  },
  mounted() {},
  methods: {},
  components: {
    category,
  },
};
</script>

<style scoped>
#app,
#game {
  display: flex;
  justify-content: space-around;
}
img {
  width: 100%;
}
video {
  width: 100%;
}
</style>

3.結果展示

4.具名插槽總結

1、在定義好slot插槽后，在需要展示的標簽中加上 slot=“name”，即可在指定的位置上顯示需要顯示的內容

2、同時需要注意的是，此方法的插槽數據源game是在App父組件中提供的，而不在子組件自身提供。為了減少冗余，可通過作用域插槽將數據存儲在定義slot插槽的組件自身

四、作用域插槽的使用

• 要求將要展示的數據放在定義插槽的組價中

• 父組件App.vue僅僅只是根據數據生成結構，而數據是在定義slot的組件中提供的

1.子組件配置slot

在子組件中配置的props僅需要接收標題頭。準備兩個作用域插槽并攜帶要展示的數據：

//category.vue
<template>
  <div id="bck">
    <h4>{{ title }}</h4>
    <slot :G="games" :F="foods">作用域插槽</slot>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      foods: ["麻辣燙", "燒烤", "小青龍", "炸醬面"],
      games: ["魔獸世界", "FIFA2016", "NBA2K", "洛克王國"],
    };
  },
  props: ["title"],
};
</script>

<style scoped>
#bck {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4 {
  text-align: center;
  background-color: #bfa;
}
</style>

2.使用者接收數據并設置結構

//App.vue
  <category title="游戲">
      <template scope="zwt">
        <!--ES6解構賦值，{}直接拿到zwt.G的值 -->
        <ul>
          <li v-for="(g, index) in zwt.G" :key="index">{{ g }}</li>
        </ul></template
      >
    </category>
    <category title="美食">
      <template scope="{F}">
        <!--ES6解構賦值，{}直接拿到zwt.F的值 -->
        <ol >
        <li v-for="(f, index) in F" :key="index">{{f}}</li>
        </ol>
      </template>
    </category>

3.結果展示

4.作用域插槽總結

1、可以解決在使用者組件中沒有要展示的數據，要調用別的組件的數據時可以使用。

2、定義slot的組件將自身的數據傳給使用者，使用者接收到數據后進行結構的配置。

3、使用者僅決定生成的結構樣式，而數據是從被使用者（定義slot的組件）傳來的。

4、可以理解為slot就是父組件向子組件的指定位置插入特定的結構。

關于“Vue具名插槽與作用域插槽怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue具名插槽與作用域插槽怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。