vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
本文实例讲述了vue 使用插槽分发内容操作。分享给大家供大家参考，具体如下：
单个插槽
除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 单个插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
</div>
var childNode = {
//当没有<slot>时，父组件的其他内容不会显示，当有<slot>时，要是父组件中的内容不为空，<slot>
//中的内容就不会显示
template: `
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
`,
};
// 创建根实例
new Vue({
el: '#example',
components: {
'my-component': childNode
}
})
</script>
</body>
</html>
具名插槽
<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 具名插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>
</div>
<script>
Vue.component('app-layout',{
template:'<div class="container">'+
'<header>'+
'<slot name="header"></slot>'+
'</header>'+
'<main>'+
'<slot></slot>'+
'</main>'+
'<footer>'+
'<slot name="footer"></slot>'+
'</footer>'+
'</div>'
})
// 创建根实例
new Vue({
el: '#example',
})
</script>
</body>
</html>
作用域插槽
作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。
在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
<div class="child"> <slot text="hello from child"></slot> </div>
在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：
在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 作用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<parent-com></parent-com>
</div>
<script>
Vue.component('child-com',{
template:'' +
'<ul>' +
' <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' +
'</ul>',
data:function(){
return {
animal:[
{name:'大象'},
{name:'小狗'},
{name:'小猫'},
{name:'老虎'}
]
}
}
});
//父组件
// 在父组件的模板里，使用一个Vue自带的特殊组件<template> ，
// 并在该组件上使用scope属性，值是一个临时的变量，存着的是由子组件传过来的
// prop对象，在下面的例子中我把他命名为props。
// 获得由子传过来的prop对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。
Vue.component('parent-com',{
template:'' +
'<div class="container">' +
'<p>动物列表</p>' +
'<child-com>' +
' <template scope="props" slot="child-ul">' +
' <li class="child-ul">{{ props.text }}</li>' +
' </template>' +
'</child-com>' +
'</div>'
});
// 创建根实例
new Vue({
el: '#example',
})
</script>
</body>
</html>
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
Vue中的slot使用插槽分发内容的方法
本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来. 也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件.那么如何实现呢?
-
vue插槽slot的理解和使用方法
前言 Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替.根据slot的应用场景可以分为匿名slot和具名slot. 一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是"父组件向子组件传递dom时会用到插槽",这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去
-
详解vue2.6插槽更新v-slot用法总结
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性.新语法的由来可查阅 RFC. 引vue官方文档 之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~ 插槽 我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽) 插槽分类 插槽一共就三大类 1.匿名
-
详解vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div> </son-tmp> 单个插槽 父组件app.vue <template> <div id="app"> <test-slot> <span>我是父组件里的文字,但是我要被放到子组件里</span> </t
-
vue中slot（插槽）的介绍与使用
什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.插槽显不显示.怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 Vue slot 原理 在web-components中有slot的概念,https://developers.google.com/web/fundamentals/web-components/shadowdom. <slot> 元素 Shado
-
Vue插槽原理与用法详解
本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 它允许你像这样合成组件: <div id="app1"> <navigation-link url="/profile"> Your Profile </navigation-link>
-
如何理解Vue的作用域插槽的实现原理
本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记 举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作).而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
详解Vue组件插槽的使用以及调用组件内的方法
组件传参 通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default { props: ['options'], data(){ return {} } } 但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message'] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽 slot的使用就像
-
详解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 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
本文实例讲述了vue 使用插槽分发内容操作.分享给大家供大家参考,具体如下: 单个插槽 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃.当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 例: <!DOCTYPE html> &
-
详解Vue 匿名、具名和作用域插槽的使用方法
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的.Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法. 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽.只要在父元素中插入的内容,默认加入到这个插槽中去.
-
关于vue 的slot分发内容 (多个分发)
目录 slot分发内容 (多个分发) slot的多种用法 基本用法 插槽中使用data 动态插槽 slot分发内容 (多个分发) 组件模板-元素可以用一个特殊的属性 name 来配置如何分发内容.多个 slot 可以有不同的名字.具名 slot 将匹配内容片段中有对应 slot 特性的元素 <style media="screen"> .panel{ margin:10px;width:150px; border:1px solid #ccc
-
python实现修改固定模式的字符串内容操作示例
本文实例讲述了python实现修改固定模式的字符串内容操作.分享给大家供大家参考,具体如下: 说明 字符串模式是开头可能有空格,之后可能存在多个小数点,然后后面跟着一个数字,数字可能是小数,数字后可能存在空格. 任务要求删去开头的小数点,如下: " -78 " 修改为" 78 " " -7.889 " 修改为" 7.889 " ".9.8"修改为"9.8" 代码示例 注意这里正则的模式和
-
vue实现百度下拉列表交互操作示例
本文实例讲述了vue实现百度下拉列表交互操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue百度下拉列表</title> <style> .gray{ background: #ccc; } </style> &l
-
Java正则提取中括号中的内容操作示例
本文实例讲述了Java正则提取中括号中的内容操作.分享给大家供大家参考,具体如下: 曾经在工作中遇到一个问题,就是需要提取字符串中每一个中括号里的内容,在网上搜了一下,发现用正则表达式可以提取中括号中的内容,具体实现如下: import java.util.ArrayList; import java.util.List; import java.util.regex.Matcher; import java.util.regex.Pattern; public class ExtractMes
-
vue实现的双向数据绑定操作示例
本文实例讲述了vue实现的双向数据绑定操作.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>经典的双向数据绑定</title> <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script> &
-
PHP检查文件是否存在，不存在自动创建及读取文件内容操作示例
本文实例讲述了PHP检查文件是否存在,不存在自动创建及读取文件内容操作.分享给大家供大家参考,具体如下: <?php $filename = 'a/b.html'; $writetext = 'ssssssssssss'; $result = jwritefile($filename, $writetext); var_dump($result);die; function jwritefile($filename, $writetext) { $position = strrpos($file