标签：Slot ... Vue2 slot 插槽 Son template 组件

Slot插槽

• 父组件向子组件传递
• 父组件将内容分发到子组件
• slot插槽的值只读，不能在子组件中修改
• slot插槽也可以作为组件之间的通信方式

默认插槽

父组件中：使用Son组件
    <template>
        <Son>
           <ul> //子组件如果不定义插槽 这里面的ul不起作用
    	    <li>我</li>
	    <li>爱</li>
	    <li>你</li>
   	   </ul>
        </Son>
    </template>

子组件中：
    <template>
        <div>
         <!-- 定义插槽 -->
           <slot>父组件中没有内容就显示这句话...</slot>
         </div>
     </template>

具名插槽

#两种方式
`注意 v-slot：简写为 # 且 具名插槽需要用 template 包裹（组件不用 template 包裹）`
父组件中：使用Son组件  
  <template>
	<Son>
   	<h1 slot="demo1">迷死他<h2>
        <ul slot="demo2"> 
    	  <li>你</li>
          <li>爱</li>
 	  <li>我</li>
   	 </ul>
        </Son>     
  </template>
//第二种写法 必须要加上template标签
        <template v-slot:demo2>
          <ul> 
                <li>我</li>
                <li>爱</li>
                <li>你</li>
   	  </ul>
        </template>

子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="demo1">父组件中没有内容就显示这句话...</slot>
	       <slot name="demo2">父组件中没有内容就显示这句话...</slot>
            </div>
        </template>

作用域插槽

#数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(son组件在father组件中使用，但是数据来源是Son组件本身，这时就需要在Son组件中用作用域插槽将数据传输给插槽的使用者)
`父组件中：`
方法一：
	<Son>
		<template scope="formSon"> 
		<!-- dataSource来子组件  -->
			<ul>
				<li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
			</ul>
		</template>
	</Son>
方法二：
	<Son>//第二种写法
		<template slot-scope="formSon">
			<!-- 生成的是h4标题 -->
			<h4 v-for="(k,index) in dataSource" :key="index">{{k}}</h4>
		</template>
	</Son>

`子组件中：`
    <template>
        <div>
            <slot :dataSource="dataSource"></slot>
        </div>
    </template>  
	<script>
        export default {
            //数据在子组件自身
            data() {
                return {
                   dataSource:['lht','lht1','lht2','lht3']
                }
            },
        }       
    </script>            

应用场景示例

template中的插槽---具名插槽

#父组件中：father.vue
	#导入子组件
import Son from './son.vue'    
<template>
  <Son>
    <template v-slot:www>
        <div>......</div> 
      //div中可以用来取父组件的值，存放到插槽再分发给子组件
    </template>
  </Son>
</template>    

#子组件中 son.vue 使用父组件中的插槽
<slot name="www"></slot>
//渲染后就出现父组件的结构内容

标签：Slot,...,Vue2,slot,插槽,Son,template,组件
来源： https://www.cnblogs.com/lht1132950411/p/16265489.html

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