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基础的动画教程,直观易懂
Jan 10 Javascript
javascript document.referrer 用法
Apr 30 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
javascript代码加载优化方法
Jan 30 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP 强制下载文件代码
2010/10/24 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
浅析Jquery操作select
2016/12/13 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python 列表删除所有指定元素的方法
2018/04/19 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
如何通过python实现全排列
2020/02/11 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python