vue插槽之slots

原创 2018年04月15日 23:18:55

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .panel{
            border: 1px solid #ececec;
        }
        .panel>*{
            padding:10px;
        }
        .title{
            border-bottom: 1px solid #ececec;
        }
        .content{
            border-bottom: 1px solid #ececec;
        }
        .footer{

        }
    </style>
</head>
<body>
<div id="app">
    <panel>
        <div slot="title">YO</div>
        <div slot="content">
            YO
            yo
        </div>
        <div slot="footer">更多信息</div>
    </panel>
</div>

<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

Vue.component('panel', {
    template: '#panel-tpl'
})
new Vue({
    el: '#app'
})

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1392

速开发一个vue插件并发布npm

转自:http://www.imooc.com/article/19691 写在前面 本次演示的是开发一个 vue手机虚拟支付键盘插件 主要讲解的是如何快速开发一个vue插件并发布到npm上 ...
  • huang100qi
  • huang100qi
  • 2017-12-20 18:48:40
  • 143

R-什么是slot插槽?

Slots are linked to S4 objects. A slot can be seen as a part, element or a "property" of an object. ...
  • u012543538
  • u012543538
  • 2013-12-23 00:31:47
  • 1303

Vue.js组件——slot杂记

懒得再写一遍,直接把我的笔记截图放上来了。截图的内容其实是自己写的测试代码最后的效果,下面把测试代码贴出来: Vue 组件slot ...
  • weixin_39420106
  • weixin_39420106
  • 2017-11-12 13:14:10
  • 135

vue中slot插口的用法

关于vue中slot插口的作用可以借助input中的placeholder属性来理解。
  • wangxiaoxiaosen
  • wangxiaoxiaosen
  • 2017-07-19 16:16:06
  • 2050

vue学习第17天,渲染 JSX 插件

1,每个虚拟DOM VNode 都是唯一的 可以多次使用工厂函数创建多个组件的实例 2,在渲染函数中 有些语法可以使用 javascript 不用 再使用 vue 的 API  3,在渲染函数中 ...
  • Sukla
  • Sukla
  • 2017-11-05 19:37:20
  • 138

vue使用插槽分发内容slot的用法

将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 &amp;lt;son-tmp&amp;gt; &amp;lt;div&amp;gt;我是文字,我需要放到son...
  • kingov
  • kingov
  • 2017-10-20 11:13:44
  • 3087

Vue 组件和插槽的理解与使用

Vue中各类插槽的使用与理解 父子组件之间的通信props和渲染函数render的使用
  • mht1829
  • mht1829
  • 2017-12-09 17:56:32
  • 719

Vue使用具名插槽细节

元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段...
  • m0_37690351
  • m0_37690351
  • 2017-09-22 10:16:13
  • 712
收藏助手
不良信息举报
您举报文章:vue插槽之slots
举报原因:
原因补充:

(最多只允许输入30个字)