<!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. mysql 临时表和内存表

    查看内存表的最大值: show variables like '%heap%'; mysql> show variables like '%heap%'; +------------------ ...

  2. Docker yum 安装

      [liwm@Eren ~]$ sudo su[root@Eren liwm]# yum install -y docker 已加载插件:fastestmirror, langpacks, prod ...

  3. 紫书 例题8-18 UVa 1442 （扫描法）

    从左往右扫描一遍, 得从每个位置往右伸长不会碰到天花板的高度, 右往左一样, 取最小, 然后就是可以放"水"的高度了 #include<cstdio> #include ...

  4. ios面试题1

    iOS面试题   1.写一个NSString类的实现 + (id)initWithCString:(c*****t char *)nullTerminatedCString encoding:(NSS ...

  5. RabbitMQserver配置文件

    RabbitMQ的server配置设置.我做了改动,改动例如以下: {tcp_listeners, [5672]}, {loopback_users, ["elite"]} 其他的 ...

  6. hdoj--1312--Red and Black（dfs）

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  7. rest_framework-认证-总结完结篇

    执行过程 APIView() Ruquest() Authentication() OrderView()APIView() def duspatch: self.initial(request) d ...

  8. python-网络-udp

    python-网络-udp 标签(空格分隔): python 开发环境:windows Pycharm+python3.* 工具:网络调试助手 UDP[client]-发送数据 from socket ...

  9. Oracle中根据表明获取对应表触发器名称

    Select object_name From user_objects a left join all_triggers b on a.object_Name = b.trigger_name wh ...

  10. windows下远程链接虚拟机Linux下MySQL数据库问题处理

    参考解决:https://www.cnblogs.com/blogforly/p/5997553.html 今天远程连接虚拟机中的MySQL数据库,一直连不上,在网上搜索了一下,发现原因是MySQL对 ...