插槽的作用(作用域插槽)

作用:让父组件可以向子组件指定位置插入html结构 也是一种组件间通信的方式 适用于 父组件传子组件
2.分类:默认插槽 具名插槽 作用域插槽
3.使用方式:

  (1)默认插槽:
    父组件中:<子组件名称><div>结构1</div>
    子组件中:<template><div><slot>插槽内容</slot></div>
 (2)具名插槽
    父组件中:<子组件名称>
    <template slot="center"><div>结构1</div>
    <div>结构1</div>
    子组件中:<template><div><slot name="center">插槽内容</slot></div>
    (3)作用域插槽:
 1.理解:数据在组件的自身 但根据数据生成的结构需要组件的使用者来决定(games数据在子组件中,但使用数据所遍历出来的结构由App组件决定)
 2.具体:
  父组件中:
  <子组件名称><template scope="jkjj"><div><slot>插槽内容</slot></div>
   <ul>
          <li v-for="(g, index) jkjj" :key="index">{{ g }}</li>
        </ul>
  </template>
    

在父组件App中

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="atguigu">
        <!-- scope="x"x可自定义 App组件作为组件的使用者 数据是放在插槽定义的组件里面的 生成的结构是在使用者组件里面的-->
        <!-- {{atguigu.jkjj}} -->
        <ul>
          <li v-for="(g, index) in atguigu.jkjj" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="{jkjj}">
        <ol>
          <li style="color:red" v-for="(g, index) in jkjj" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="{jkjj}">
          <h4 v-for="(g, index) in jkjj" :key="index">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  methods: {},
  components: {
    Category,
  },
};
</script>

<style  scoped >
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>


在子组件中

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
   <slot :jkjj="games">我是默认的一些内容</slot>
  </div>
</template>

<script>
export default {
    name:'Category',
    props:['title'],
  data(){
    return{
      games:['红色警戒','穿越火线','劲舞团','超级玛丽',],
    }
  },
  components: {

  }
}
</script>

<style scoped>
.category{
    background-color: skyblue;
    width: 200px;
    height: auto;
}
</style>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
插槽作用域是指在Vue组件中,插槽可以接受来自父组件的数据,并在模板中使用这些数据。通过插槽作用域,我们可以将父组件的数据传递给插槽内部,实现数据的动态渲染。 作用域插槽是指在定义插槽时,可以将插槽对应的数据传递给子组件,并在子组件中根据该数据进行渲染。作用域插槽通过在插槽中添加一个属性,将父组件的数据传递到插槽内部,然后在子组件中使用这个属性来渲染内容。这样,我们可以在父组件中动态地向子组件插入不同的内容。 总结起来,插槽作用域作用域插槽是Vue组件中的两个重要概念。插槽作用域允许父组件向插槽传递数据,而作用域插槽则允许子组件接收并使用这些数据来渲染内容。这样的设计使得组件之间的数据传递更加灵活和可控。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue匿名插槽作用域插槽的合并和覆盖行为](https://download.csdn.net/download/weixin_38659622/12943692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue作用域插槽实现方法及作用详解](https://download.csdn.net/download/weixin_38641150/12925203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [浅析vue插槽作用域插槽的理解](https://download.csdn.net/download/weixin_38743372/12943719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值