vue slot插槽理解
新手上路,根据vue官方手册记录学习内容,主要知识点如下.
- 插槽内容
- 命名插槽
- 默认插槽内容
- 插槽作用域
插槽内容
插槽是用于向子组件分发内容的,当在父组件中应用子组件时,子组件标签内的内容会分发到子组件模板中具有slot标签的位置.(如果子组件模板中没有slot标签,父组件里子组件标签内的内容会全部被丢弃掉的.)
源码:
<body>
<template id="model">
<div>
<p>我是model组件的内容p>
div>
template>
<div id="app">
<p>我是段落一p>
<p>我是段落二p>
div>
body>
<script>
var model = {
template: "#model",
}
var vm = new Vue({
el: "#app",
components: {
"model": model
}
})
script>
渲染结果:
<div id="app">
<div>
<p>我是model组件的内容p>
div>
div>命名插槽(具名插槽)
在某些地方需要用到多个插槽,就可以利用slot标签的的特殊属性name,使之与父组件中需要分发的内容通过slot=”name属性值”.产生关联.
源码:
<body>
<template id="model">
<div>
<p>我是model组件的内容p>
<slot name="paragrahy1">slot>
<slot name="paragrahy2">slot>
<slot>slot> //默认插槽,用于接受所有不匹配内容的插槽位置.
div>
template>
<div id="app">
<model>
<p slot="paragrahy1">我是段落一p>
<p slot="paragrahy2">我是段落二p>
<p>我是段落三p>
model>
div>
body>
渲染结果:
<div id="app">
<p>我是model组件的内容p>
<p>我是段落一p>
<p>我是段落二p>
<p>我是段落三p>
div>
默认插槽内容
当有些场景需要插槽预先提供默认内容.(如果父组件模板中，向 slot 位置提供了内容，子组件 slot 元素的默认内容就会被替换。)
<body>
<template id="model">
<div>
<slot>我是插槽默认内容slot>
div>
template>
<div id="app">
<model>model>
div>
body>
渲染结果:
<div id="app">
<div>我是插槽默认内容div>
div>插槽作用域
插槽都是向下分发内容, 作用域插槽实现了子组件向父组件传递数据((2.5.+在父组件无论什么标签都能接受slot-scope,不仅局限在template标签上).
<body>
<template id="model">
<div>
<slot v-bind:arr="list">slot>
div>
template>
<div id="app">
<model>
<p slot-scope="slotname">{{slotname.arr}}p>
model>
div>
body>
<script>
var model = {
template: "#model",
data: function () {
return {
list: "lalala"
}
}
}
var vm = new Vue({
el: "#app",
components: {
"model": model
}
})
script>
渲染结果:
<div id="app">
<div>
<p>lalalap>
div>
div>注意点:
编译作用域:父组件模板的内容只在父组件作用域内编译.子组件模板的内容只在子组件作用域内编译.
eg:
<body>
<template id="model">
<div>
<slot>slot>
div>
template>
<div id="app">
<model>
<p>{{gender}}p>
model>
div>
body>
<script>
var model = {
template: "#model",
}
var vm = new Vue({
el: "#app",
data: function () {
return {
gender: "男"
}
},
components: {
"model": model
}
})
script>
渲染结果:
<div id="app">
<div>
<p>男p>
div>
div>参考文档:
https://vuefe.cn/v2/api/
https://blog.csdn.net/Coder_Chang/article/details/80090000