vue组件——slot分发内容
2017-04-20 09:17
716 查看
slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。
有 name
特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。
内容分发就是指混合父组件的内容与子组件自己的模板
单个slot
如果子组件的模板不包含 slot,那么父组件的内容就会被抛弃
父组件html中的内容:
main.js中引入子组件game
运行的结果发现父组件中内容没有显示在子组件中。
那么game.vue子组件中有slot的情况
运行结果就会发现父组件中的内容显示在子组件中了
如果父组件中没有传递内容,子组件中slot给默认内容,那么子组件中的默认内容会显示出来
父组件html中的内容:
game子组件:
运行结果会显示子组件中的slot中的内容
具名slot
slot元素可以用一个特殊的属性name 来配置如何分发内容,多个slot可以有不用的名字,根据具名slot的name来进行匹配,显示内容。如果有默认的slot,那么没有匹配到的内容将会显示到默认的slot中,如果没有默认的slot,那么没有匹配到的内容将会被抛弃
父组件中的内容
子组件中的slot有name属性,与父组件的slot的值相对应,那么久会匹配到。没有匹配到的先会显示在默认的slot中。
运行结果:当子组件有默认的slot时,会显示没有匹配到的内容 "小学生要背锅"
如果子组件中没有默认的slot时
那么运行的结果,将会把父组件中没有匹配到的内容 "小学生要背锅" 给抛弃掉
编译作用域
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译
父组件模板:
父组件的js文件 main.js
子组件模板
子组件的js文件 game.js
运行的结果如下图,可以发现父组件的内容 “游戏排行榜” 在父组件作用域内编译,并且显示在子组件的默认slot中,而子组件中的内容 "背锅侠"在子组件作用域内编译,显示在子组件中。
有 name
特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。
内容分发就是指混合父组件的内容与子组件自己的模板
单个slot
如果子组件的模板不包含 slot,那么父组件的内容就会被抛弃
父组件html中的内容:
<div id="app"> <game> <h1>王者荣耀</h1> <h3>王者荣耀</h3> </game> </div>
main.js中引入子组件game
import game from "./game.vue" new Vue({ el: '#app', data: {}, methods: {}, components: { game, } })game.vue子组件中没有slot的情况
<template> <div> <h4>游戏</h4> </div> </template>
运行的结果发现父组件中内容没有显示在子组件中。
那么game.vue子组件中有slot的情况
<template> <div> <h4>游戏</h4> <slot></slot> </div> </template>
运行结果就会发现父组件中的内容显示在子组件中了
如果父组件中没有传递内容,子组件中slot给默认内容,那么子组件中的默认内容会显示出来
父组件html中的内容:
<div id="app"> <game> </game> </div>
game子组件:
<template> <div> <h4>游戏</h4> <slot>有没有游戏可以玩?</slot> </div> </template>
运行结果会显示子组件中的slot中的内容
具名slot
slot元素可以用一个特殊的属性name 来配置如何分发内容,多个slot可以有不用的名字,根据具名slot的name来进行匹配,显示内容。如果有默认的slot,那么没有匹配到的内容将会显示到默认的slot中,如果没有默认的slot,那么没有匹配到的内容将会被抛弃
父组件中的内容
<game> <h1 slot="k1">王者荣耀</h1> <h2 slot="k2">王者荣耀</h2> <p>小学生要背锅</p> </game>
子组件中的slot有name属性,与父组件的slot的值相对应,那么久会匹配到。没有匹配到的先会显示在默认的slot中。
<template> <div> <h4>游戏</h4> <slot name="k1"></slot> <slot name="k2"></slot> <slot></slot> </div> </template>
运行结果:当子组件有默认的slot时,会显示没有匹配到的内容 "小学生要背锅"
如果子组件中没有默认的slot时
<template> <div> <h4>游戏</h4> <slot name="k1"></slot> <slot name="k2"></slot> </div> </template>
那么运行的结果,将会把父组件中没有匹配到的内容 "小学生要背锅" 给抛弃掉
编译作用域
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译
父组件模板:
<game> <p>{{ msg }}</p> <h1 slot="k1">王者荣耀</h1> <h2 slot="k2">王者荣耀</h2> </game>
父组件的js文件 main.js
data: { msg: "游戏排行榜", }
子组件模板
<template> <div> <h4>{{ msg }}</h4> <slot name="k1"></slot> <slot name="k2"></slot> <slot></slot> </div> </template>
子组件的js文件 game.js
let vm = { data() { return { msg: "背锅侠", } } } export default vm
运行的结果如下图,可以发现父组件的内容 “游戏排行榜” 在父组件作用域内编译,并且显示在子组件的默认slot中,而子组件中的内容 "背锅侠"在子组件作用域内编译,显示在子组件中。
相关文章推荐
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
- vue之组件 slot内容分发
- Vue组件之--slot内容分发
- Vuejs——(11)组件——slot内容分发
- 三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- Vuejs组件之slot内容分发实例详解
- vue组件详解(四)——使用slot分发内容
- Vuejs组件——slot内容分发
- 常用js框架之vue.js(深入四:组件2,slot内容分发,编译作用域,动态切换组件)
- vue组件详解之使用slot分发内容
- Vuejs组件——slot内容分发
- Vuejs——(11)组件——slot内容分发
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- Vue中slot内容分发
- Vuejs第十一篇组件之slot内容分发实例详解
- vue如何使用 Slot 分发内容实例详解
- Vuejs——(11)组件——slot内容分发
- vue slot内容分发
- vue使用插槽分发内容slot的用法