vue2.0使用slot插槽分发内容
<!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插槽分发内容的更多相关文章
- vue组件-使用插槽分发内容(slot)
slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...
- vue2.0 之 slot 内容分发
前提:父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.被分发的内容会在父作用域内编译. 一.单个插槽 // 子组件模板 child-component <div> ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- Vue组件-使用插槽分发内容
在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...
- Vuejs-组件-<slot> 标签分发内容
资料来自:https://cn.vuejs.org/v2/guide/components.html#具名-Slot 在官方文档的基础上,更加细致的讲解代码. <slot> 标签中的任何内 ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
- vue 通过插槽分发内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue2.0 官方文档学习笔记
VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...
随机推荐
- c语言优化
虽然对于优化C代码有很多有效的指导方针,但是对于彻底地了解编译器和你工作的机器依然无法取代,通常,加快程序的速度也会加大代码量.这些增加的代码也会影响一个程序的复杂度和可读性,这是不可接受的,比如你在 ...
- c语言函数实参与形参整理
- flume1.8 开发指南学习感悟
概述: Apache Flume是一个分布式.可用的系统,用于从许多不同的sources有效的收集并移动大量日志数据用于集中存储数据. 架构及数据流动模型: flume实际上就是一个Agent.Age ...
- java线程间通信：一个小Demo完全搞懂
版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...
- [国嵌攻略][158][SPI裸机驱动设计]
SPI控制器工作流程 SPI控制器提供2个SPI接口.每个SPI接口有两个通道,分别为TX通道和RX通道.CPU要写数据到FIFO中,先写数据到SPI_TX_DATA寄存器中,这样此寄存器中的内容就会 ...
- [学习OpenCV攻略][003[初试牛刀——显示图片]
cvLoadImage(路径) 加载指定路径的图片到内存 cvNamedWindow("窗口名称", 属性) 创建窗口,窗口名称用来被其他函数引用,属性:0表示窗口大小不变,CV_ ...
- 在阿里云服务器上安装完成并启动Tomcat后，通过http不能访问--解决办法
在阿里云服务器上安装完成并启动Tomcat后,通过http不能访问的原因是阿里云平台为了安全设置了安全组策略,必须我们授权的端口,其他计算机才能通过http访问 解决办法:(这里以阿里轻量应用服务器为 ...
- springboot：快速构建一个springboot项目
前言: springboot作为springcloud的基础,springboot的热度一直很高,所以就有了这个springboot系列,花些时间来了解和学习为自己做技术储备,以备不时之需[手动滑稽] ...
- 在Pycharm中运行Scrapy爬虫项目的基本操作
目标在Win7上建立一个Scrapy爬虫项目,以及对其进行基本操作.运行环境:电脑上已经安装了python(环境变量path已经设置好), 以及scrapy模块,IDE为Pycharm .操作如下: ...
- 你不知道的Javascript：有趣的setTimeout
你不知道的Javascript:有趣的setTimeout 有时候,小小的细节往往隐藏着大大的智慧今天在回顾JavaScript进阶用法的时候,发现一个有趣的问题,话不多说,先上代码: for(var ...