<!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. 1044 - Access denied for user 'root'@'%' to database 'xahy-blog' 解决方案二

    检查 user 表中'root'@'%' 的grant的权限 select HOST,USER,Grant_priv,Super_priv from mysql.`user`; 可以看到现在这两个权限 ...

  2. python3安装xadmin失败

    环境win7 旗舰版.python3 使用pip install xadmin命令的时候出现了错误>:\ (⊙o⊙) 解决方法如下: 使用pip download xadmin 现将xadmin ...

  3. 关于python return 和 print 的区别

    概念上一个是 返回值   一个是打印输出 区别一:return是结束语一般放在函数的最后,当你在return 结束后面再写一些东西是不执行的如 下 def renshu(x,y): h=x+y pri ...

  4. Zabbix分布式配置

    Zabbix是一个分布式监控系统,它可以以一个中心点.多个分节点的模式运行,使用Proxy能大大的降低Zabbix Server的压力,Zabbix Proxy可以运行在独立的服务器上,安装Zabbi ...

  5. Camera Calibration 相机标定：原理简介（二）

    2 针孔相机模型 常见的相机标定中,使用的相机多为针孔相机(Pinhole camera),也就是大家熟知的小孔成像理论.将其中涉及的坐标系之间的相互转换抽离出来,即为针孔相机模型的核心. 上图所示的 ...

  6. 洛谷 P2040 打开所有的灯

    P2040 打开所有的灯 题目背景 pmshz在玩一个益(ruo)智(zhi)的小游戏,目的是打开九盏灯所有的灯,这样的游戏难倒了pmshz... 题目描述 这个灯很奇(fan)怪(ren),点一下就 ...

  7. 很好的DP思路，字符串比较次数

    题目: https://leetcode.com/problems/distinct-subsequences/?tab=Description 一般没有明显思路的情况下,都要想想DP,用下Divid ...

  8. hadoop-15-Ambari进行HDP、zookeeper安装

    hadoop-15-Ambari进行HDP.zookeeper安装 1,登陆server_1:8080 admin/admin 2,命名:Hdp_cluster 3,输入HDP.HDP_Utils 地 ...

  9. leetcode笔记：Merge Sorted Array

    一.题目描写叙述 二.解题技巧 这道题不存在复杂的分析过程和边界条件.假设单纯得考虑从小到大地将两个数组进行合并的话.每次在num1中插入一个数的话,须要将后面的元素都向后移动一位.这样.整个处理过程 ...

  10. Double Vision （Unity 5.0）

    Double Vision (Unity 5.0): 根据 http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter03.html ...