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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
JavaScript 调试器简介
Feb 21 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
vue-cli在 history模式下的配置详解
Nov 26 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
session 的生命周期是多长
2006/10/09 PHP
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
使用python实现ANN
2017/12/20 Python
使用python实现knn算法
2017/12/20 Python
python与字符编码问题
2019/05/24 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
大整数数相乘的问题
2012/07/22 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
应用英语专业自荐信
2014/01/26 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
《比的意义》教学反思
2016/02/18 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Python闭包的定义和使用方法
2022/04/11 Python