<!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. 当relative遇上z-index，阻断事件捕获

    今天在调试前端页面的时候,发现addflowrank这个元素的click事件不能触发了.下图是它的元素结构. 用开发者工具试图定位这个元素,看看它到底怎么了.发现:无论我怎么用光标定位这个元素都定位不 ...

  2. NodeJS 第一天学习

    NodeJS 第一天学习 严格模式 ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式,从而使代码显示地 脱离"马虎模式/稀松模式/懒散模式"(s ...

  3. 有趣的console

    博文第一篇,就以前端调试的“座上客”---console开始

  4. Ubuntu上面安装docker

    1.先用uname -r查看系统的信息 2.安装docker的命令为 sudo apt install docker.io 3.然后就能实现安装了 但是:运行docker search golang, ...

  5. shell学习日志

    0.shell的变量同环境变量不同,存在用户环境区. 变量赋值的方式是: variable_name = variable_value a= "hello" $a对a进行取值 关于 ...

  6. 普通码农和CTO之间的差距

    虚心 学习的第一步是--"我不懂".一个空是水杯才能装水,如果是满的就没有办法装水了."自我肯定"是一种非常难克服的习惯,经常会有朋友看到某个技术或者实现之后不 ...

  7. arcmap 设置线段的不同颜色（及其它转化）

    一: shp 转化为 mxd或导出地图  当时做的第一个shp文件,应该是研一的第二个学期了,都不记得是怎么操作的了. 通过file另存为mxd就可以生成各个shp的arcmap能够直接打开的mxd文 ...

  8. 面试题：Student s = new Student();在内存中做了哪些事情?即创建一个对象做了哪些事情

    lStudent s = new Student();在内存中做了哪些事情? •载入Student.class文件进内存(方法区) •在栈内存为s开辟空间 •在堆内存为学生对象开辟空间 •对学生对象的 ...

  9. 在PyCharm中以root权限运行和调试python代码

    python中有的代码可能需要su权限,如 import os os.mkdir('/media/xxx/disk_a') 如果在交互式环境中使用,需要以sudo的方式启动python．而在PyCha ...

  10. angularjs ng-app

    <!DOCTYPE HTML> <html ng-app> //ng-app是初始化指令,整个页面都会被angularjs解析,写在div或者其他标签上表示只是局部的div和标 ...