vue slot插槽的使用方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head> <body>
<div id="app">
<div>
<!-- 单slot -->
<v-one>
<!-- 这里的所有内容会替换掉slot -->
<p>初始化段落一</p>
<p>初始化段落二</p>
</v-one>
<!-- 渲染结果 -->
<!-- <div>
<h1>组件标题</h1>
<p>初始化段落一</p>
<p>初始化段落二</p>
<p>组件段落内容</p>
<p>I am one</p>
</div> --> <!-- 具名slot -->
<v-two>
<p slot="nav">我是导航</p>
<p slot="main">我是内容</p>
<p slot="footer">我是底部</p>
</v-two>
<!-- 渲染结果 -->
<!-- <div>
<nav>
<p>我是导航</p>
</nav>
<main>
<p>我是内容</p>
</main>
<footer>
<p>我是底部</p>
</footer>
</div> --> <!-- 作用域插槽 -->
<v-three>
<!-- 父组件默认无法使用子组件数据 -->
<template scope="props">
<p>{{props.text}}</p>
</template>
</v-three> <!-- 渲染结果 -->
<!-- <div><p>I am three</p></div> -->
</div>
</div> <template id="one">
<div>
<h1>组件标题</h1>
<slot></slot>
<p>组件段落内容</p>
<p>{{one}}</p>
</div>
</template> <!-- 具名slot -->
<template id="two">
<div>
<nav>
<slot name="nav"></slot>
</nav>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template> <!-- 作用域插槽 -->
<template id="three">
<div>
<!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 -->
<slot :text="three"></slot>
</div>
</template>
<script>
new Vue({
el: '#app',
components: {
'v-one': {
template: '#one',
data() {
return {
'one': 'I am one'
}
}
},
'v-two': {
template: '#two',
data() {
return {
'two': 'I am two'
}
}
},
'v-three': {
template: '#three',
data() {
return {
'three': 'I am three'
}
}
}
}
});
</script>
</body> </html>
单个slot使用最简单，也是最常用的，当我们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就可以用slot实现。
具名slot只是给slot加了name属性，在使用的时候可以引入多个。
作用域slot就比较强大了，我们知道子组件的数据，在父组件中是无法使用的，但是通过官方提供的扩展，可以轻松实现这一点。
渲染后效果图，可以直接复制代码自己在浏览器运行查看效果
vue slot插槽的使用方法的更多相关文章
- Vue slot插槽
插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- Vue slot 插槽用法：自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- vue slot插槽的使用
slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子 ...
- vue slot 插槽详解
插槽含义:就是引入子组件后,在插入子组件元素中添加信息或者标签,使得子组件的指定位置插入信息或者标签 插槽有三种:默认插槽.具名插槽.作用域插槽,由于vue2.6.0后对插槽进行修改,但是兼容2.6. ...
- Vue slot插槽通俗解释
slot内容分发是Vue的Api来源 <div id="app"> <my-list> {{msg}} </my-list> </div& ...
- vue slot 插槽备忘
老是记不住插槽咋回事 记录下来备忘 父组件 <tab><template slot="boy" slot-scope="test">{{ ...
- vue slot插槽v-show不控制显示隐藏
vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.
- 8.Vue组件三---slot插槽
主要内容: 1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...
随机推荐
- python实现查找算法：二分查找法
二分查找算法也称折半查找,基本思想就是折半,和平时猜数字游戏一样,比如猜的数字时67,猜测范围是0-100,则会先猜测中间值50,结果小了,所以就会从50-100猜测,中间值为75,结果大了,又从50 ...
- 用adb取出在手机中安装的apk
第一步:列出所有安装的apk adb shell pm list packages 然后找到自己要取出来的apk的包名. 第二布:找到apk的位置(后面跟上包名) adb shell pm path ...
- IIS8.0 部署WCF Services
今天在Win 8的IIS上部署WCF Services,访问SVC文件时出现找不到处理程序的错误,以前遇到这个问题时都是尝试通过注册asp.net的方式处理一下,但是在Win8下这招不灵了,出现如下提 ...
- KJMusic完整音乐项目
KJMusic完整音乐项目 KJMusic是一个完整音乐项目,这个项目从欢迎页面到首页以及音乐播放页面都做得非常不错.并且本音乐支持本地音乐,和音乐电台,支持切换上下首个.本项目还支持侧滑出现menu ...
- 机器学习之overfiting
有错欢迎指正,别让小弟继续错下去. 我们在使用机器学习过程中,经常会overfiting,overfiting的产生原因是noise.训练样本大的话,还好,不用考虑这个 问题.但是,当数据量小的时候, ...
- InfluxDB时序数据库应用场景
目前了解到的InfluxDB时序数据库应用场景:如在数据库中有很多条记录,有的记录包含了时间字段time和数值字段water_level,有的只有时间字段time SELECT MAX("w ...
- JS----事件2
一 事件对象(event):与特定事件相关且包含有关该事件详细信息的对象 通过事件可以触发event对象的元素,鼠标的位置及状态,按下的键等等event对象只在事件发生的过程中才有效非IE浏览器里的e ...
- elasticsearch 问题
elasticsearch 的端口默认绑定到 127.0.0.1 上,对外开放 http 端口就配置 http.host,对外开放 tcp 端口就配置 network.host [1]: max fi ...
- 2017面向对象程序设计（Java） 第4周学习指导及要求（2017.9.14-2017.9.18）
学习目标 深入理解程序设计中算法与程序的关系: 深入理解java程序设计中类与对象的关系: 理解OO程序设计的第一个特征:封装: 需要掌握基本使用方法的预定义类有:Math类.String类.Arra ...
- mui-webview-子页面调用父页面的js方法
子页面// 获取当前webviewvar self = plus.webview.currentWebview();var opener = self.opener();//此句调用父页面jsopen ...