ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

插槽

2021-11-22 10:01:05  阅读:97  来源: 互联网

标签:作用域 插槽 默认 html 组件 结构


  1. 作用:让父组件可以向子组件指定位置插入HTML结构,也是一种组件通信的方式,适用于 父组件==>子组件

  2. 分类:默认插槽、具名插槽、作用域插槽

  3. 使用方式:

    1. 默认插槽
       父组件:
       <Son>
       	<div>html结构</div>
       </Son>
       子组件:
       <template>
       	<div>
               <!--定义插槽-->
               <slot>插槽默认内容</slot>
           </div>
       </template>
    
    1. 具名插槽
       父组件:
       <Son>
       	<template slot="center">
           	<div>html结构1</div>
           </template>
           
           <!--v-slot仅适用于templat标签和组件标签-->
           <template v-slot:footer>
           	<div>html结构2</div>
           </template>
       </Son>
       子组件:
       <template>
       	<!--定义插槽-->
           <slot name="center">插槽默认内容</slot>
       	<slot name="footer">插槽默认内容</slot>
       </template>
    
    1. 作用域插槽

      1. 理解: 数据在定义插槽的组件自身,但根据数据生成的结构需要组件的使用者来决定(数据films在Son组件中,但使用数据遍历出来的结构由App组件决定)

      2. 具体编码

         父组件:
         <Son>
             <!--
                 scope的值接收对象,子组件中slot标签可能传递多个数据,对象点属性名即可获取对应的数据,scope支持解构赋值
                 scope旧的API
                 slot-scope新的API
                 两者使用方式一致
               -->
         	<template scope="scopeData">
             	<!--生成的是ul列表-->
         		<ul>
                     <li v-for="f in scopeData.films" :key="f">{{f}}</li>
                 </ul>
             </template>
         </Son>
         
         <Son>
         	<template slot-scope="{{films}}">
             	<!--生成的是h4标签-->
                 <h4 v-for="f in films" :key="f">{{f}}</h4>
             </template>
         </Son>
         子组件
         <template>
         	<div>
                 <slot :films="films"></slot>
             </div>
         </template>
         
         <script>
         	export default{
                 name:'Son',
                 //数据在子组件自身
                 data(){
                     return{
                         films: ["这个杀手不太冷", "我和我的祖国", "建军大业", "悬崖上的金鱼姬"]
                     }
                 }
             }
         </script>
      

标签:作用域,插槽,默认,html,组件,结构
来源: https://www.cnblogs.com/PHY01/p/15587236.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有