vue slot 在子组件中显示父组件传递的模板


Posted in Javascript onMarch 02, 2018

父组件使用没有指定slot属性,默认为default

在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值

vue slot 在子组件中显示父组件传递的模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <modal>
      <!-- 调用父组件的方法 -->
      <h1 @click='click'>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
      <p slot='title'>hello</p>
      <p slot='content'>
        world
      </p>
    </modal>
    <modal></modal>
  </div>
  <template id="modal">
    <!-- 使用slot在子组件中显示父组件传过来的模板 -->
      <div>
        modal
        <slot name='default'>如果没有会使用这个默认值</slot>
      <h1>
        title:
        <slot name='title'>
        </slot>
      </h1>
      content:
      <slot name='content'></slot>
      </div>
    </template>
  <script type="text/javascript">
    let modal = {
      template: '#modal'
    }
    new Vue({
      el: '#app',
      components: {
        // es 简写 ,只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log('aaa')
        }
      }
    })
  </script>
</body>
</html>

总结

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

Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
js操作二级联动实现代码
Jul 27 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 #Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 #Javascript
详解node.js 下载图片的 2 种方式
Mar 02 #Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 #Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 #Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 #Javascript
浅谈FastClick 填坑及源码解析
Mar 02 #Javascript
You might like
php SQL Injection with MySQL
2011/02/27 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
Python正则表达式完全指南
2017/05/25 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python同时处理多个异常的方法
2020/07/28 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
公司前台辞职报告
2014/01/19 职场文书
高中同学会活动方案
2014/08/14 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
招标授权委托书样本
2014/09/23 职场文书
运动会广播稿300字
2015/08/19 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS