vue之slot用法

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。

有 name 特性的 slot 称为具名 slot。有 slot 特性的内容将分发到名字相匹配的具名 slot。

一、单个组件

如果子组件的模板不包含 slot，那么父组件的内容就会被抛弃

父组件内容

<template><div><child>若子组件没有slot，则这句话不会显示</child></div>
</template><script>
import Child from './Child.vue'
export default {name: 'HelloWorld',components:{'child':Child}
}
</script>

子组件内容

<template><div><h1>我是子组件</h1></div>
</template>

浏览器显示

因为子组件没有<slot> 元素，所以父组件的内容被抛弃，现在我们在子组件加上<slot> 元素

<template><div><h1>我是子组件</h1><slot></slot></div>
</template>

此时浏览器显示

此时，父组件的内容就显示在了子组件的内容里了。

二、具名slot

上面案例中讲解的是当组件的模板中有一个slot的方法，那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。

父组件内容

<template><child><h1 slot="h1">标题一</h1><h2 slot="h2">标题二</h2><h3>标题三</h3>   </child>
</template><script>
import Child from './Child.vue'
export default {components:{'child':Child}
}
</script>

子组件内容

<template><div><h1>我是子组件</h1><slot name="h1"></slot><slot name="hh"></slot><slot></slot></div>
</template>

浏览器显示

分析：子组件中的slot有name属性，与父组件的slot的值相对应，那么就会匹配到，若子组件中slot有name属性，但父组件没有与之相对的slot的值，则会被抛弃掉。父组件没有slot值的内容则会显示在默认的slot中。如果子组件中没有默认的slot,父组件没有slot值的内容就会被抛弃。

转载于:https://www.cnblogs.com/clicklin/p/9389892.html

vue之slot用法相关推荐

vue solt(插槽)用法小结
之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...
slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
vue 插槽 slot 的用法
vue 插槽 slot 的用法一.简单定义.使用 slot 二.slot 变量传值三.跨组件传递 slot 方法1: 多定义一个中间插槽方法2:使用 scopedSlots 字段传递作用域插槽 ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
vue 具名插槽用法
vue 具名插槽用法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue插槽 - slot
vue插槽 - slot 前言一.插槽内容二.编译作用域三. 后备内容四. 具名插槽五. 作用域插槽 1. 基本用法 2. 独占默认插槽的缩写语法 3. 解构插槽Prop 六. 动态插槽名 ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
Vue 中 slot插槽的使用
Vue 中 slot插槽的使用插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
Vue 之 slot(插槽）
前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&quo ...

vue之slot用法

一、单个组件

二、具名slot

vue之slot用法相关推荐

最新文章

热门文章