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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
简述JS控制台的使用
Jul 15 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python图像处理之反色实现方法
2015/05/30 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
超市促销活动方案
2014/03/05 职场文书
社区母亲节活动方案
2014/03/05 职场文书
公司授权委托书
2014/04/04 职场文书
三年级评语大全
2014/04/23 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
单位提档介绍信
2015/10/22 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript