<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <style>

    </style>

</head>

<body>

<!--slot:

    位置、槽口

    作用: 占个位置

    类似ng里面 transclude  （指令）-->

    <div id="box">

        <aaa>

            <ul> <!--出不来-->

                <li>1111</li>

                <li>2222</li>

                <li>3333</li>

            </ul>

        </aaa>

    </div>

    <script>

        var vm=new Vue({

            el:'#box',

            data:{

                a:'aaa'

            },

            components:{

                'aaa':{

                    template:'<h1>xxxx</h1>'

                }

            }

        });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <style>

    </style>

</head>

<body>

    <div id="box">

        <aaa>

            <ul>

                <li>1111</li>

                <li>2222</li>

                <li>3333</li>

            </ul>

        </aaa>

    </div>

    <template id="aaa">

        <h1>xxxx</h1>

        <slot>这是默认的情况</slot> <!--ul出来了-->

        <p>welcome vue</p>

    </template>

    <script>

        var vm=new Vue({

            el:'#box',

            data:{

                a:'aaa'

            },

            components:{

                'aaa':{//标签名

                    template:'#aaa'//模版位置

                }

            }

        });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <style>

    </style>

</head>

<body>

    <div id="box">

        <aaa>

            <ul slot="ul-slot">

                <li>1111</li>

                <li>2222</li>

                <li>3333</li>

            </ul>

            <ol slot="ol-slot">

                <li>111</li>

                <li>222</li>

                <li>333</li>

            </ol>

        </aaa>

        <hr>

        <aaa>

        </aaa>

    </div>

    <template id="aaa">

        <h1>xxxx</h1>

        <slot name="ol-slot">这是默认的情况</slot>

        <p>welcome vue</p>

        <slot name="ul-slot">这是默认的情况2</slot>

    </template>

    <script>

        var vm=new Vue({

            el:'#box',

            data:{

                a:'aaa'

            },

            components:{

                'aaa':{

                    template:'#aaa'

                }

            }

        });

    </script>

</body>

</html>

vue21 slot占位的更多相关文章

  1. 07-组件通信、slot插槽

    一.组件通信 ① 父 => 子 -- 步骤 1)子组件中通过 props 键接受父组件传值 2)父组件通过 v-bind 向子组件传值 --例子 <!DOCTYPE html> &l ...

  2. Vue进阶（Bus/作用域slot/动态组件）

    一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过pro ...

  3. vue的组件化运用（数据在两个组件互传，小问题总结）

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

  4. Vue源码

    参考文章:http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/?utm_source=qq&utm_medi ...

  5. Vue.js使用-组件（下篇）

    上一节,我们定义了组件的基本使用,下面我们看看组件其他的一些特性. 1.组件作用域 同时在Vue对象和组件中定义一个属性,显示结果是怎样的呢? <!DOCTYPE html> <ht ...

  6. EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  7. Lightning Web Components 组合（五）

    使用组合我们可以用来设计复杂的组件. 组合一些比较小的组件,可以增加组件的重新性以及可维护性. 通过以下一个简单的demo,将会展示关于owner 以及container 的概念,在实际的项目中 ex ...

  8. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  9. 摘抄大神对VUE 中slot-scope的深度理解

    Vue的slot-scope的场景的个人理解 这篇文章不是单纯把文档的话和api拿来翻译和演示,而是谈谈我对于slot-scope的使用场景的个人理解,如果理解错误,欢迎讨论! Vue的插槽slot, ...

随机推荐

  1. 页面加载完成触发input[type="file"]控件问题

    由于浏览器厂家的限制,不同的浏览器不开放页面加载完成就允许触发input[type="file"]控件 测试 Chrome .火狐 .IE .微信客户端QQ =>桌面端: C ...

  2. Linux命令之bc - 浮点计算器、进制转换

    用途说明 Bash内置了对整数四则运算的支持,但是并不支持浮点运算,而bc命令可以很方便的进行浮点运算,当然整数运算也不再话下.手册页上说bc是An arbitrary precision calcu ...

  3. virtual box虚拟机在linux下设置共享文件夹

    使用的虚拟机版本是:VirtualBox-5.2.8-121009 使用的linux版本是:Ubuntu 12.04.5 LTS 和 Linux Mint 19 Tara 1. 安装增强功能包(Gue ...

  4. (52)KeyError错误

    当出现:22KeyError: 'xxxxxx'这样的错误,可以肯定依赖出问题了,一般是你引用某个字段,但没有定义,又没有指定依赖的模块,最后找不到对应字段 解决方法:开发工具,把 xxxxxx 去搜 ...

  5. UVA 12003 Array Transformer

    Array Transformer Time Limit: 5000ms Memory Limit: 131072KB This problem will be judged on UVA. Orig ...

  6. centos安全配置

    http://www.dedecms.com/knowledge/servers/linux-bsd/2012/0819/8506.html 引言: 我们必须明白:最小的权限+最少的服务=最大的安全 ...

  7. securefx连接linux后文件夹中文乱码问题解决

    首先在选项中设置字符编码为UTF-8 然后在全局选项中找到Securefx的配置文件 进入到该目录中,选择“Sessions”: 在“Sessions”中找到链接地址的ini文件,并用文本编辑器打开: ...

  8. 洛谷——P3370 【模板】字符串哈希

    题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. 友情提醒:如果真的想好好练习哈希的话,请自觉,否则请右转 ...

  9. pydev 安装

    pydev断断续续空余时间安装了好几天,终于安装上了,需要注意的几点有, 1.插件地址 http://update-production-pydev.s3.amazonaws.com/pydev/up ...

  10. 一个使用sbt编译的JNI C++ 的模板

    假设你须要在Scala或是Java中调用C或C++函数库,就须要使用JNI. 这里就涉及到编译scala ,java 和C(C++)代码,在这里给出一个程序的框架,我们使用sbt 缺省的代码文件夹 文 ...