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 22 Javascript
Prototype使用指南之range.js
Jan 10 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
原生js实现滑块区间组件
Jan 20 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
js实现鼠标跟随运动效果
2020/08/02 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
Python实现Const详解
2015/01/27 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python简单读取json文件功能示例
2017/11/30 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python 如何调用远程接口
2020/09/11 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
校长个人总结
2015/03/03 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
我的1919观后感
2015/06/03 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书