<!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. 模块-- HASH

    模块 HASH   一 MD5 import hashlib h = hashlib.md5() # In [237]: h # Out[237]: <md5 HASH object @ 0x0 ...

  2. 计算机组成原理--64位CPU装载32位操作系统，它的寻址能力还是4GB吗？

    借由这个问题,今天我们就把 32 位 CPU.64 位 CPU.32 位操作系统.64 位操作系统之间的区别与联系彻底搞清楚.对于这个问题,博主也是一知半解了好长时间啊~ 基本概念 32位的CPU与6 ...

  3. UVA-1602 Lattice Animals 搜索问题（打表+set）

    题目链接 https://vjudge.net/problem/UVA-1602 紫书的一道例题,跟之前的很多题目有很多不同. 本题不像是一般的dfs或bfs这样的搜索套路,而是另一种枚举思路. 题意 ...

  4. ajax 不执行

    1.get形式访问: 一个相同的URL 只有一个结果,所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果,post则不会 解决办法: 1.url+new Date( ...

  5. 动态Axios配置

    推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙.前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什 ...

  6. 洛谷 P1541 乌龟棋 （四维费用背包）

    一开始直接用01背包 后来发现这个物品和位置有关. 也就是价值不是固定的 后来看了题解 看了卡片最多就4 所以这是一个四维费用的背包, 每一维是卡片的数量 价值就是当前的位置的价值. 但是与常规的背包 ...

  7. ASP.NET-ajax.BeginForm使用02

      Ajax.BeginForm中OnFailure.Onsuccess.OnComplete函数是可以处理从后台返回的数据的,比直接使用jquery的$.ajax方法还要节约时间   @using( ...

  8. 洛谷 P3914 染色计数

    P3914 染色计数 题目描述 有一颗NN个节点的树,节点用1,2,\cdots,N1,2,⋯,N编号.你要给它染色,使得相邻节点的颜色不同.有MM种颜色,用1,2,\cdots,M1,2,⋯,M编号 ...

  9. sort函数自定义compare方法

    今天看到有C++这样写: sort(ins.begin(), ins.end(), [](Interval a, Interval b){return a.start < b.start;}); ...

  10. oracle 11g RAC手动卸载grid，no deinstall

    1.通过root用户进入到grid的ORACLE_HOME [root@db01]# source /home/grid/.bash_profile [root@db01]# cd $ORACLE_H ...