vue 组件中slot插口的具体用法


Posted in Javascript onApril 03, 2018

子组件

<template>
  <div class="slotcontent">
    <ul>
      <!--<slot></slot>-->
      <li v-for="item in items">{{item.text}}</li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        items:[
          {id:1,text:'第1段'},
          {id:2,text:'第2段'},
          {id:3,text:'第3段'},
        ]
      }
    }
  }
</script>
<style scoped>
</style>

父组件

<template>
  <div>
    <h2>首页</h2>
    <router-link to="/home/details">跳转到详情</router-link>
    <p>父组件</p>
    <slotshow>
      <p>{{msg}}</p>
    </slotshow>
  </div>
</template>
<script>
  import slotshow from '../components/slotshow'
  export default{
    data(){
      return{
        msg:"测试内容"
      }
    },
    components:{
      slotshow
    }
  }
</script>
<style>
</style>

这种情况是如果要父组件在子组件中插入内容 ,必须要在子组件中声明slot 标签  ,如果子组件模板不包含<slot>插口,父组件的内容<p>{{msg}}</p>将会被丢弃。

 当slot存在默认值<slot><p>默认值</p></slot>,且父元素在<slotshow></slotshow>中没有要插入的内容时,会显示<p>默认值</p>(p标签会去掉),当slot存在默认值,且父元素在<child>中存在要插入的内容时,则显示父组件中设置的值,

具名slot

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-header">我是头部</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

vue 组件中slot插口的具体用法

仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽,有slot属性的元素如果没有配置slot,则会被抛弃

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 <slot></slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
<p slot="my-body">插入<slot name="my-body">中,<p>我是其他内容</p>插入<slot>中,而<p slot="my-footer">被丢弃

vue 组件中slot插口的具体用法

如果没有默认的 slot,这些找不到匹配的内容片段也将被抛弃

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
<p>我是其他内容</p>和<p slot="my-footer">都被抛弃

vue 组件中slot插口的具体用法

作用域插槽

作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中,只需将数据传递到插槽,就像将 props 传递给组件一样

<span style="font-size: 16px"><div class="child">
 <slot text="hello from child"></slot>
</div></span>

在父级中,具有特殊属性 scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象.

var <span style="color: #ffffff">childNode</span> = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot xxx="hello from child"></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <template scope="props">
 <p>hello from parent</p>
 <p>{{ props.xxx }}</p>
 </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

如果渲染以上结果,得到的输出是

vue 组件中slot插口的具体用法

【列表组件】

作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项

var childNode = {
 template: `
 <ul>
 <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
 </ul>
 `,
 data(){
 return{
 items:[
 {id:1,text:'第1段'},
 {id:2,text:'第2段'},
 {id:3,text:'第3段'},
 ]
 }
 }
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
 <template slot="item" scope="props">
 <li>{{ props.text }}</li>
 </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

vue 组件中slot插口的具体用法 

总结

以上所述是小编给大家介绍的vue 中slot 的具体用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JSONObject使用方法详解
Dec 17 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 #Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 #Javascript
vue内置指令详解
Apr 03 #Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 #Javascript
Angular2进阶之如何避免Dom误区
Apr 02 #Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
You might like
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
详解django模板与vue.js冲突问题
2019/07/07 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python构造函数及解构函数介绍
2015/02/26 Python
python读写二进制文件的方法
2015/05/09 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
pywinauto自动化操作记事本
2019/08/26 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
服务行业口号
2014/06/11 职场文书
班主任工作实习计划
2015/01/16 职场文书
工作试用期自我评价
2015/03/10 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL