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简单的图片放大缩小的两种方法
Nov 11 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
jQuery的文档处理程序详解
May 10 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
浅谈React之状态(State)
Sep 19 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
原生JS实现留言板功能
Feb 08 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数组随机排序实现方法
2015/06/13 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
浅谈javascript的调试
2015/01/28 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 基础之字符串string详解及实例
2017/04/01 Python
python tornado微信开发入门代码
2018/08/24 Python
python中的print()输出
2019/04/12 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
中学运动会广播稿
2014/01/19 职场文书
保证书格式范文
2014/04/28 职场文书
春节联欢会策划方案
2014/05/16 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
会议欢迎词
2015/01/23 职场文书
淮海战役观后感
2015/06/11 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技