Vue のスロット分析で使用される名前付きスロットとスコープ付きスロット-Vue.js-php.cn

Vue のスロット分析で使用される名前付きスロットとスコープ付きスロット

WBOY

リリース： 2022-08-10 15:32:17

転載

2107 人が閲覧しました

この記事では、vue に関する関連知識を提供します。主に名前付きスロットとスコープスロットの使用に関連する問題について紹介します。スロットはサブコンポーネントで提供されます。親コンポーネントによって使用されるプレースホルダーです。スロットには、デフォルトスロット、名前付きスロット、スコープスロットが含まれます。これらを一緒に見てみましょう。皆様のお役に立てれば幸いです。

Vue のスロット分析で使用される名前付きスロットとスコープ付きスロット

【関連する推奨事項: javascript ビデオチュートリアル、vue.js チュートリアル】

1. とはスロット

1. スロットは、親コンポーネントに提供される子コンポーネント内のプレースホルダーです。子コンポーネントでは、で表されます。親コンポーネントは次のとおりです。このプレースホルダーに HTML、コンポーネントなどのテンプレートコードを入力すると、入力されたコンテンツが子コンポーネントのタグを置き換えます。 (簡単に言うと、他のコンポーネントが飛び込めるようにサブコンポーネントに穴を掘ることです)

2. バージョン 2.6.0 以降、slot と slot-scope は一律 v-slot に置き換えられます。

3. スロットには、デフォルトスロット、名前付きスロット、およびスコープスロットが含まれます

2. 早期の準備

1、通过vue-cli创建好初始化项目
2、src下创建category.vue，同时在App.vue中引入

ログイン後にコピー

3. 名前付きスロットの使用

1. サブコンポーネント構成スロット

サブコンポーネントで props を構成し、親コンポーネントアプリから情報を受け取り、2 つのスロット挿入を準備しますスロット:

//category.vue
<template>
  <div>
    <h3>{{ title }}</h3>
    //准备两个带有不同name的插槽（可以让使用者在指定的地方显示数据）
    <slot>默认插槽1</slot>
    <slot>默认插槽2</slot>
  </div>
</template>

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

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

ログイン後にコピー

2. ユーザー App.vue 構成データ

サブコンポーネントカテゴリで定義された別の名前により、データは指定された場所に表示できます:

//App.vue
<template>
  <div>
    <category>
      <img  alt="Vue のスロット分析で使用される名前付きスロットとスコープ付きスロット" >
      <a>更多</a>
    </category>
    <category>
      <ul>
        <li>{{ g }}</li>
      </ul>
      <div>
        <a>单机游戏</a>
        <a>网络游戏</a>
      </div>
    </category>
    <category>
      <video></video>
      <div>
        <a>更多信息1</a>
        <a>更多信息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>
#app,
#game {
  display: flex;
  justify-content: space-around;
}
img {
  width: 100%;
}
video {
  width: 100%;
}
</style>

ログイン後にコピー

3. 結果表示

Vue のスロット分析で使用される名前付きスロットとスコープ付きスロット

4. 名前付きスロットの概要

1. スロットスロットを定義後、表示したいラベルにslot="name"を追加することで指定した位置に表示することができます。

#2. 同時に、このメソッドのスロットデータソースゲームは、子コンポーネント自体ではなく、App の親コンポーネントで提供されることに注意してください。冗長性を減らすために、スコープスロットを介してスロットを定義するコンポーネント自体にデータを保存できます。

4. スコープスロットの使用

Requiresスロットを定義するコンポーネントに配置される表示されるデータ
親コンポーネント App.vue はデータに基づいて構造を生成するだけであり、データはスロットを定義するコンポーネント

#1 で提供されます。サブコンポーネント設定スロット

サブコンポーネント内で設定されたプロパティは、ヘッダーを受け取るだけで済みます。 2 つのスコープスロットを用意し、表示するデータを運びます:

//category.vue
<template>
  <div>
    <h3>{{ title }}</h3>
    <slot>作用域插槽</slot>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
      games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
    };
  },
  props: ["title"],
};
</script>

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

ログイン後にコピー

2。ユーザーはデータを受け取り、構造体を設定します。

//App.vue
  <category>
      <template>
        <!--ES6解构赋值，{}直接拿到zwt.G的值 -->
        <ul>
          <li>{{ g }}</li>
        </ul></template>      >
    </category>
    <category>
      <template>
        <!--ES6解构赋值，{}直接拿到zwt.F的值 -->
        <ol>
        <li>{{f}}</li>
        </ol>
      </template>
    </category>

ログイン後にコピー