vue slot与传参实例代码讲解
vue 2023-03-16 12:26:38

插槽分为默认插槽和具名插槽：

默认插槽：　

XML/HTML Code复制内容到剪贴板
  1. //父组件  
  2. <div>  
  3.   <h3>父组件</h3>  
  4.   <testChild>  
  5.    <div>默认插槽</div>  
  6.   </testChild>  
  7. </div>  
  8.    
  9. //子组件  
  10. <div>  
  11.  <h4>子组件</h4>  
  12.  <slot></slot>  
  13. </div>  

 

具名插槽：

注意：具名插槽需要包裹在 template 标签中，否则会报错

XML/HTML Code复制内容到剪贴板
  1. //父组件  
  2. <div>  
  3.   <h3>父组件</h3>  
  4.   <testChild>  
  5.    <template v-slot:test>//v-slot: + 插槽名  
  6.     <ul>  
  7.      <li v-for="item in list">{{item.name}}</li>  
  8.     </ul>  
  9.    </template>  
  10.   </testChild>  
  11.  </div>  
  12. //子组件  
  13.  <div>  
  14.   <h4>子组件</h4>  
  15.   <slot name="test"></slot> //name="插槽名"  
  16.  </div>  

 

子组件向父组件传参：

JavaScript Code复制内容到剪贴板
  1. //父组件  
  2.  <div>  
  3.   <h3>父组件</h3>  
  4.   <testChild>  
  5.    <template v-slot:test="data">//具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性  
  6.     <ul>  
  7.      <li v-for="item in data.list2">{{item.name}}</li>  
  8.     </ul>  
  9.    </template>  
  10.    <template v-slot="dataDefalut">//默认插槽  
  11.     {{dataDefalut.sName}}  
  12.    </template>  
  13.   </testChild>  
  14.  </div>  
  15.    
  16. //子组件  
  17. <template>  
  18.  <div>  
  19.   <h4>子组件</h4>  
  20.   <slot name="test" :list2="list2"></slot>  
  21.   <slot :sName="name"></slot>  
  22.  </div>  
  23. </template>  
  24. <script>  
  25.  export default {  
  26.   name: "testChild",  
  27.   data(){  
  28.    return {  
  29.     list2:[  
  30.      {name:'ccc'},  
  31.      {name:'ddd'}  
  32.     ],  
  33.     name:'name'  
  34.    }  
  35.   }  
  36.  }  
  37. </script>  

 

补充：vue 利用slot向父组件传值

闲话不多说，上代码

子组件，里面有slot插槽，并在slot上绑定了text值

JavaScript Code复制内容到剪贴板
  1. <template>  
  2.  <div @click="$emit('change',checked+1)">  
  3.   <slot name="icon" :text="text"></slot>  
  4.  </div>  
  5. </template>  
  6. <script>  
  7.  export default{  
  8.   data(){  
  9.    return {  
  10.     text:"我是子组件"  
  11.    }  
  12.   },  
  13.   props:["checked"],  
  14.   model:{  
  15.    prop: 'checked',  
  16.    event: 'change'  
  17.   }  
  18.  }  
  19. </script>  

 

父组件通过slot-scope就可以拿到子组件slot上绑定的值，并且2.5.0版本可以用于任意元素上

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.  <div id="app">  
  3.   <img src="./assets/logo.png">  
  4.   <!--<router-view/>-->  
  5.   <car v-model="index">  
  6.    <div slot="icon" slot-scope="props">  
  7.     {{props.text}}  
  8.    </div>  
  9.   </car>  
  10.  </div>  
  11. </template>  

 

 

 

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/657.html

上一篇 uniapp获取当前的地理位置【uni.getLocation(OBJECT)】
下一篇 vue3+vite使用环境变量.env的一些配置说明
相关的文章
Powered by yoyo苏ICP备15045725号