Vue中的slot使用插槽分发内容的方法
<slot></slot>标签，简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。
也有人说：props可以将数据从父组件传入子组件，slot可以将html从父组件传入子组件。那么如何实现呢？
单个插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
// 有效，因为是在正确的作用域内
template: '<div>\
<h2>我是子组件的标题</h2>\
<slot>只有在没有要分发的内容时才会显示。</slot>\
</div>',
data: function () {
return {
}
}
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>
组件中的模板中写入slot标签，在父级调用子组件的时候传入html即可。
具名插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<my-component>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</my-component>
</div>
<script type="text/javascript">
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>',
data: function () {
return {
}
}
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>
具名插槽，顾名思义当有多个slot标签时，你需要给他们起个自己的名字，在父组件调用时需要slot="内部的对应名字"，当存在没有命名的slot标签时，父级组件传入的默认html代码将全部输出在无名的slot标签中。
作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
<child>
<template scope="props">
<span>hello from parent</span><br>
<span>{{ props.text }}</span>
</template>
</child>
</div>
<script type="text/javascript">
// 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
Vue.component('child',{
template:'<ul>' +
'<slot text="hello from child"></slot>' +
'</ul>',
data:function(){
return {
}
},
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>
作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。
其实就是相当于，在父组件中可以获取到子组件传递出来的props对象，从而渲染到父组件上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Vue组件中slot的用法
- 深入理解vue中slot与slot-scope的具体使用
- 详解vue.js数据传递以及数据分发slot
- Vue2.0 slot分发内容与props验证的方法
- vue如何使用 Slot 分发内容实例详解
- Vue内容分发slot(全面解析)
- vue Render中slots的使用的实例代码
- 详解Vue学习笔记入门篇之组件的内容分发(slot)
- Vue.js中组件中的slot实例详解
- 详解vue slot插槽的使用方法
- Vue.js之slot深度复制详解
相关推荐
-
vue如何使用 Slot 分发内容实例详解
vue我自己还在摸索学习中,今天学习了使用 Slot 分发内容,给自己留个小笔记 使用slot分发内容我们要注意2点 <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app> 组件很可能有它自己的模板. 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板. [案例] <!DOCTYPE html> <html lang="en"> <head> <me
-
vue Render中slots的使用的实例代码
本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考.希望此文章对各位有所帮助. render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name . 想使用多个slot 的话.需要对slot命名唯一.使用this.$slots.name 在render中添加多个slot. <body> <div class="&qu
-
详解Vue学习笔记入门篇之组件的内容分发(slot)
介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ message }} </child-component> mess
-
Vue组件中slot的用法
下面给大家介绍Vue组件中slot的用法 主要是让组件的可扩展性更强. 1. 使用匿名slot 2. 给slot加个名字 如果不在有slot的组件里加入任何标签,slot什么都不会显示的. 总结 以上所述是小编给大家介绍的Vue组件中slot的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: 详解Vue学习笔记入门篇之组件的内容分发(slot) Vue.js中组件中的slot实例详解 Vuejs第十一篇组件之
-
详解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"><
-
Vue内容分发slot(全面解析)
前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" ).Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 <slot> 元素作为原始内容的插槽.本文将详细介绍Vue内容分发slot 编译作用域 在深入内容分发 API 之前,先明确内容在哪个作用域里编译.假定模板为 <child-component> {{ message }} </chi
-
Vue.js之slot深度复制详解
前言 在Vue中,slot是一个很有用的特性,可以用来向组件内部插入一些内容.slot就是"插槽"的意思,用大白话说就是:定义组件的时候留几个口子,由用户来决定插入的内容. 例如我们定义一个组件MyComponent,其包含一个slot: Vue.component('MyComponent', { template: ` <div> <slot></slot> </div> ` }) 当调用<MyComponent>123&
-
深入理解vue中slot与slot-scope的具体使用
写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生"算了吧,回头再学,反正已经可以写基础组件了",于是就关闭了vue说明文档. 实际上,插槽的概念很简单,下面通过分三部分来讲.这个部分也是按照vue说明文档的顺序来写的. 进入三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板
-
Vue.js中组件中的slot实例详解
Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活
-
Vue2.0 slot分发内容与props验证的方法
使用一种方式混合父组件的内容与子组件自己的模板,这个过程被称为"内容分发".在子组件中使用特殊的<slot>元素作为内容的插槽. Slot分发内容 概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <div id="app"> <children> <span>123
-
详解vue.js数据传递以及数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111"变成"我是子组件的数据" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级获取子级的数据