欢迎莅临 SUN WU GANG 的园子！！！

世上无难事，只畏有心人。有心之人，即立志之坚午也，志坚则不畏事之不成。
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
Vue学习笔记57--vue默认插槽 + 具名插槽 + 作用域插槽

插槽总结：

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件之间通信的方式，适用于--父组件==》子组件。
  2. 分类：默认插槽、具名插槽、作用域插槽
  3. 使用方式
    • 默认插槽 
      • 父组件中：
<Category>
    <div>html结构</div>
</Category>

子组件中：
<template>
    <div>
        <!-- 定义插槽，等待组件的使用者使用 -->
        <slot>插槽默认内容</slot>
    </div>    
</template>
    • 具名插槽 
        • 父组件中：
<Category>
    <template slot="center">
        <div>html结构1</div>
    </template>
    <template v-slot="footer">
        <div>html结构2</div>
    </template>
</Category>

子组件中：
<template>
    <div>
        <!-- 定义插槽，等待组件的使用者使用 -->
        <slot name="center">插槽默认内容</slot>
                  <slot name="footer">插槽默认内容</slot>
           　　</div> 
          </template>
    • 作用域插槽
      • 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)
      • 具体编码： 
        • <template>
  <div class="app">
    <!-- 写法一 -->
    <Category title="游戏">
      <template scope="mygame">
        <!-- 我这就可以获取到对象了，里面包含Category.vue中的games对象哦 -->
        <!-- {{mygame}} -->
        <ul>
          <li v-for="(item,index) in mygame.games"
              :key="index">{{item}}</li>
        </ul>
        {{mygame}}
      </template>
    </Category>

    <!-- 写法二 -->
    <Category title="游戏">
      <template scope="{games}">
        <ol>
          <li v-for="(item,index) in games"
              style="color: brown;"
              :key="index">{{item}}</li>
        </ol>
      </template>
    </Category>

    <!-- 写法三 -->
    <Category title="游戏">
      <template slot-scope="{games}">
        <h3 v-for="(item,index) in games"
            :key="index">{{item}}</h3>
      </template>
    </Category>
  </div>
</template>
<script

vue默认插槽

示例一：不使用插槽

Category.vue
<template>
  <div class="category">
    <h3>{{title}}</h3>
    <ul>
      <li v-for="(item,index) in listData"
          :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: ['listData', 'title'],

}
</script>

<style>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3 {
  text-align: center;
  background-color: burlywood;
}
</style>

App.vue

<template>
  <div class="app">
    <Category title="美食"
              :listData="foods" />
    <Category title="游戏"
              :listData="games" />
    <Category title="电影"
              :listData="films" />
  </div>
</template>

<script>
// 引入组件
import Category from './components/Category.vue';
export default {
  name: 'App',
  components: { Category },
  data () {
    return {
      foods: ['玉米', '火鸡', '凉皮', '肉夹馍'],
      games: ['吃鸡', '红警', '魔兽', '超级玛丽'],
      films: ['大话西游', '封神榜', '三国', '大圣归来'],
      msg: '插槽学习喽'
    }
  },

}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-around;
  margin: 5px;
}
</style>

vue默认插槽 slot

示例二：

Category2.vue
<template>
  <div class="category">
    <h3>{{title}}</h3>
    <!-- 定义插槽，等待组件的使用者使用 -->
    <slot></slot>

  </div>
</template>

<script>
export default {
  name: 'Category2',
  props: ['title'],

}
</script>

<style scope>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  text-align: center;
  background-color: burlywood;
}
</style>

App.vue

<template>
  <div class="app">
    <Category title="美食">
      <img src="./assets/foods.jpeg"
           alt="">
    </Category>
    <Category title="游戏"
              :listData="games">
      <ul>
        <li v-for="(item,index) in games"
            :key="index">{{item}}</li>
      </ul>
    </Category>
    <Category title="电影">
      <!-- <img src="./assets/films.jpg"
           alt=""> -->
      <video controls
             src="https://www.bilibili.com/video/BV1LX4y1H7wX/?spm_id_from=333.880.my_history.page.click"></video>
    </Category>
  </div>
</template>

<script>
// 引入组件
// import Category from './components/Category.vue';
import Category from './components/Category2.vue';
export default {
  name: 'App',
  components: { Category },
  data () {
    return {
      foods: ['玉米', '火鸡', '凉皮', '肉夹馍'],
      games: ['吃鸡', '红警', '魔兽', '超级玛丽'],
      films: ['大话西游', '封神榜', '三国', '大圣归来'],
      msg: '插槽学习喽'
    }
  },

}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-around;
  margin: 5px;
}
video {
  width: 100%;
}
img {
  width: 95%;
  height: 75%;
  margin-left: 5px;
}
</style>

具名插槽：具有名称的插槽

Category.vue

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <!-- 定义插槽，等待组件的使用者使用 -->
    <slot name="center">这里是一些默认值，当使用者没有传递具体结构时，会显示这些信息</slot>
    <slot name="footer">这里是一些默认值，当使用者没有传递具体结构时，会显示这些信息</slot>

  </div>
</template>

<script>
export default {
  name: 'Category',
  props: ['title'],

}
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  text-align: center;
  background-color: burlywood;
}
</style>

App.vue

<template>
  <div class="app">
    <!-- {{msg}} -->
    <Category title="美食">
      <img src="./assets/foods.jpeg"
           slot="center"
           alt="">
      <a href="https://www.baidu.com/"
         slot="footer">百度一下</a>
    </Category>
    <Category title="游戏"
              :listData="games">
      <ul slot="center">
        <li v-for="(item,index) in games"
            :key="index">{{item}}</li>
      </ul>
      <div slot="footer"
           class="footercss">
        <a href="https://www.baidu.com/">单击游戏</a>
        <a href="https://www.baidu.com/">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <!-- <img src="./assets/films.jpg"
           alt=""> -->
      <video controls
             slot="center"
             src="https://www.bilibili.com/video/BV1LX4y1H7wX/?spm_id_from=333.880.my_history.page.click"></video>
      <!-- 注：slot="footer" 属性 可分别在 每个标签中设置哦              -->

      <!--  第一种写法  建议使用该方式
        <template slot="footer">
        <div class="footercss">
          <a href="https://www.baidu.com/">大圣归来</a>
          <a href="https://www.baidu.com/">西游记</a>
          <a href="https://www.baidu.com/">东游记</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template> -->

      <!-- 第二种写法  v-slot: 只能在template写法 -->
      <template v-slot:footer>
        <div class="footercss">
          <a href="https://www.baidu.com/">大圣归来</a>
          <a href="https://www.baidu.com/">西游记</a>
          <a href="https://www.baidu.com/">东游记</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>

    </Category>
  </div>
</template>

<script>
// 引入组件
import Category from './components/Category.vue';
export default {
  name: 'App',
  components: { Category },
  data () {
    return {
      foods: ['玉米', '火鸡', '凉皮', '肉夹馍'],
      games: ['吃鸡', '红警', '魔兽', '超级玛丽'],
      films: ['大话西游', '封神榜', '三国', '大圣归来'],
      msg: '具名插槽学习喽==》'
    }
  },

}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-around;
  margin: 5px;
}
.footercss {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
img {
  width: 90%;
  height: 70%;
  margin-left: 10px;
}
a {
  font-size: 13px;
  margin: 10px;
  text-align: center;
}
h4 {
  text-align: center;
}
</style>

作用域插槽：数据在定义插槽的地方，数据结构在使用的地方

示例三：

Category.vue

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <!-- 定义插槽，等待组件的使用者使用 -->
    <slot :games="games"
          :msg="msg">这里是一些默认值，当使用者没有传递具体结构时，会显示这些信息</slot>
    <!-- <ul>
      <li v-for="(item,index) in games"
          :key="index">{{item}}</li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: ['title'],
  data () {
    return {
      games: ['吃鸡', '红警', '魔兽', '超级玛丽'],
      msg: '作用域插槽第二个参数',
    }
  },
}
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  text-align: center;
  background-color: burlywood;
}
</style>

App.vue

<template>
  <div class="app">
    <!-- 写法一 -->
    <Category title="游戏">
      <template scope="mygame">
        <!-- 我这就可以获取到对象了，里面包含Category.vue中的games对象哦 -->
        <!-- {{mygame}} -->
        <ul>
          <li v-for="(item,index) in mygame.games"
              :key="index">{{item}}</li>
        </ul>
        {{mygame}}
      </template>
    </Category>

    <!-- 写法二 -->
    <Category title="游戏">
      <template scope="{games}">
        <ol>
          <li v-for="(item,index) in games"
              style="color: brown;"
              :key="index">{{item}}</li>
        </ol>
      </template>
    </Category>

    <!-- 写法三 -->
    <Category title="游戏">
      <template slot-scope="{games}">
        <h3 v-for="(item,index) in games"
            :key="index">{{item}}</h3>
      </template>
    </Category>
  </div>
</template>

<script>
// 引入组件
import Category from './components/Category.vue';
export default {
  name: 'App',
  components: { Category },
}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-around;
  margin: 5px;
}
.footercss {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
img {
  width: 90%;
  height: 70%;
  margin-left: 10px;
}
a {
  font-size: 13px;
  margin: 10px;
  text-align: center;
}
h4 {
  text-align: center;
}
</style>

 

posted on 2024-03-22 16:01  sunwugang  阅读(103)  评论(0)    收藏  举报