Vue 插槽 新语法
2020-02-08 本文已影响0人
wdapp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 插槽 新语法</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
border: 1px red solid;
margin: 10px;
}
.main {
border: 1px green solid;
margin: 10px;
}
.footer {
border: 1px orange solid;
margin: 10px;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<base-layer :key="key">
<template v-slot:[key]>
<p>动态插槽名</p>
</template>
<template v-slot:default>
<p>默认插槽 1</p>
</template>
<template v-slot:main>
<div>具名插槽</div>
</template>
<template v-slot:list="options">
<li v-for="val in options.list">
{{val}}
</li>
</template>
<template #footer="{user}">
具名插槽缩写 {{user}}
</template>
</base-layer>
<default-slot v-slot="{tag: name='hello'}">
<p>独占默认插槽的缩写法 {{name}}</p>
<p>v-slot支持解构和任何支持函数参数的语法</p>
</default-slot>
</div>
<script>
/**
* 这里主要介绍了 Vue 2.6.0+ 插槽的新语法
*/
Vue.component("BaseLayer", {
pros: {
key: {
type: String,
default: ""
}
},
data() {
return {
list: [1, 2, 3, 4],
firstName: "科比",
lastName: "布莱恩特",
user: "GM"
};
},
template:
`<div>
<div class="header">
header
<slot>
后背内容
</slot>
</div>
<div class="main">
main
<slot name="main"></slot>
<ul>
<slot name="list" :list="list">
作用域插槽
</slot>
</ul>
<slot name="center"></slot>
</div>
<div class="footer">
footer
<slot name="footer" :user="user"></slot>
</div>
</div>`
});
Vue.component("DefaultSlot", {
data() {
return {
tag: "DefaultSlot"
};
},
template:
`<div>
<slot :tag="tag"></slot>
</div>`,
});
var app = new Vue({
el: "#app",
data: {
message: "插槽作用域",
key: "center"
},
methods: {}
});
</script>
</body>
</html>
