vue slot与传参实例代码讲解


Posted in Javascript onApril 28, 2019

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

默认插槽: 

//父组件
<div>
  <h3>父组件</h3>
  <testChild>
   <div>默认插槽</div>
  </testChild>
</div>

//子组件
<div>
 <h4>子组件</h4>
 <slot></slot>
</div>

vue slot与传参实例代码讲解

具名插槽:

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

//父组件
<div>
  <h3>父组件</h3>
  <testChild>
   <template v-slot:test>//v-slot: + 插槽名
    <ul>
     <li v-for="item in list">{{item.name}}</li>
    </ul>
   </template>
  </testChild>
 </div>
//子组件
 <div>
  <h4>子组件</h4>
  <slot name="test"></slot> //name="插槽名"
 </div>

vue slot与传参实例代码讲解

子组件向父组件传参:

//父组件 
 <div>
  <h3>父组件</h3>
  <testChild>
   <template v-slot:test="data">//具名插槽,v-slot: +插槽名+ ="自定义数据名",子组件所传参数都是其属性
    <ul>
     <li v-for="item in data.list2">{{item.name}}</li>
    </ul>
   </template>
   <template v-slot="dataDefalut">//默认插槽
    {{dataDefalut.sName}}
   </template>
  </testChild>
 </div>

//子组件
<template>
 <div>
  <h4>子组件</h4>
  <slot name="test" :list2="list2"></slot>
  <slot :sName="name"></slot>
 </div>
</template>
<script>
 export default {
  name: "testChild",
  data(){
   return {
    list2:[
     {name:'ccc'},
     {name:'ddd'}
    ],
    name:'name'
   }
  }
 }
</script>

结果:

vue slot与传参实例代码讲解

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

闲话不多说,上代码

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

<template>
 <div @click="$emit('change',checked+1)">
  <slot name="icon" :text="text"></slot>
 </div>
</template>
<script>
 export default{
  data(){
   return {
    text:"我是子组件"
   }
  },
  props:["checked"],
  model:{
   prop: 'checked',
   event: 'change'
  }
 }
</script>

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

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <!--<router-view/>-->
  <car v-model="index">
   <div slot="icon" slot-scope="props">
    {{props.text}}
   </div>
  </car>
 </div>
</template>

这样,就可以拿到子组件里面的text值。

总结

以上所述是小编给大家介绍的vue slot与传参实例代码讲解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
微信小程序三级联动选择器使用方法
May 19 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 #Javascript
详解vue更改头像功能实现
Apr 28 #Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
You might like
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
学习ExtJS form布局
2009/10/08 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
Javasript设计模式之链式调用详解
2018/04/26 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
研究生毕业自我鉴定范文
2014/03/27 职场文书
爱护草坪标语
2014/06/24 职场文书
物理教育专业求职信
2014/06/25 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
四年级语文教学反思
2016/03/03 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python