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 相关文章推荐
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
javascript实现评分功能
2020/06/24 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
使用python绘制常用的图表
2016/08/27 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
租房协议书
2014/04/10 职场文书
门面房租房协议书
2014/12/01 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js