<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script>
//1
// Vue.component(
// 'my-component',{
// template:`
// <div>
// <slot>
// 只有在没有要分发的内容时才会显示。
// </slot>
// <h2>我是子组件的标题</h2>
// </div>`
// }
// )
// var app = new Vue({
// data:'',
// components:{
// 'father':{
// template:`<div>
// <h1>我是父组件的标题</h1>
// <my-component>
// <p>这是一些初始内容</p>
// <p>这是更多的初始内容</p>
// </my-component>
// </div> `
// }

// }
// }).$mount('#app');
//自组建标记中本来不应该写入值，但加入slot后，父组件中在子组件写的标记会写入slot中。如果去掉slot则不会显示初始内容和更多内容

//2具名插槽
// Vue.component(
// 'my-component',{
// template:`
// <div class="container">
// <header>
// <slot name="header"></slot>
// </header>
// <main>
// <slot></slot>
// </main>
// <footer>
// <slot name="footer"></slot>
// </footer>
// </div>`
// }
// )

// var app = new Vue({
// data:'',
// components:{
// 'father':{
// template:
// `<my-component>
// <h1 slot="header">这里可能是一个页面标题</h1>
// <p>主要内容的一个段落。</p>
// <p>另一个主要段落。</p>
// <p slot="footer">这里有一些联系信息</p>
// </my-component>`
// }

// }
// }).$mount('#app');

//3作用域插槽
Vue.component(
'my-component',{
template:`
<div class="child">
<slot text="hello from child" css="abc"></slot><div>您好</div>
</div>`
}
)

var app = new Vue({
data:'',
components:{
'father':{
template:
`<div class="parent">
<my-component>
<template slot-scope="props">
<span>hello from parent</span>
<span>{{ props.text }}{{ props.css }}</span>
</template>
</my-component>
</div>`
}

}
}).$mount('#app');

//在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。相当于从子组件传递数据给父组件。
</script>
</body>
</html>

vue2.0使用slot插槽分发内容的更多相关文章

  1. vue组件-使用插槽分发内容(slot)

    slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...

  2. vue2.0 之 slot 内容分发

    前提:父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.被分发的内容会在父作用域内编译. 一.单个插槽 // 子组件模板 child-component <div> ...

  3. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  4. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  5. Vue组件-使用插槽分发内容

    在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...

  6. Vuejs-组件-<slot> 标签分发内容

    资料来自:https://cn.vuejs.org/v2/guide/components.html#具名-Slot 在官方文档的基础上,更加细致的讲解代码. <slot> 标签中的任何内 ...

  7. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  8. vue 通过插槽分发内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Vue2.0 官方文档学习笔记

    VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...

随机推荐

  1. Spring框架学习笔记（3）——配置bean

    1.属性注入 (1)根据setter方法属性注入,这里使用的是property标签.需要bean属性提供对应的setter方法,比如笔记(1)里的 HelloWorld使用的就是这种方法. <! ...

  2. java 跳出多层循环

    lableB: for(int i=0;i<10;i++){ lableA: for(int j=0;j<10;j++){ System.out.println(j); if(j==1){ ...

  3. 《SpringMVC从入门到放肆》五、SpringMVC配置式开发（处理器适配器）

    上一篇我们大致讲解了处理器映射器的处理流程以及跟了一下源码的执行流程.今天我们来了解一下处理器适配器. 一.适配器模式 在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapt ...

  4. [国嵌攻略][117][LED驱动程序设计]

    LED程序设计 1.编写内核模块 2.搭建字符驱动框架 3.实现设备方法 头文件 <linux/io.h> writel() 1.编译/安装驱动 make cp leddev.ko ... ...

  5. sublimeserver启动本地服务器（sublime text）

    今天又get到了一个新知识点,就是在sublime text上也可以模拟一个本地服务器的环境,前提是要先安装sublimeserver这个插件.这个插件的安装办法有两种. 1.我们可以直接在subli ...

  6. 用于 C&sharp; 图像识别的轮廓分析技术

    用于 C♯ 图像识别的轮廓分析技术 供稿:Conmajia 标题:Contour Analysis for Image Recognition in C# 作者:Pavel Torgashov 此中文 ...

  7. RxJava整合Retrofit遇到的问题总结

    一:初上手(填坑) Observable将事件序列执行完毕后,会回调Observe的onNext()方法和onCompleted()方法,当出现异常/错误时会调用onError()方法. 由此,我们推 ...

  8. mysql中使用show table status 查看表信息

    学习标签: mysql 本文导读:在使用mysql数据库时,经常需要对mysql进行维护,查询每个库.每个表的具体使用情况,Mysql数据库可以通过执行SHOW TABLE STATUS命令来获取每个 ...

  9. css cursor属性-显示的光标的类型(形状)的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

  10. 【jsp】MyEclipse10.7.1最新版+破解下载

    MyEclipse企业级工作平台[1](MyEclipse Enterprise Workbench ,简称MyEclipse)是对EclipseIDE的扩展,利用它我们可以在数据库和JavaEE的开 ...