<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<template id="tmp">
<h1 id="h1">template h1</h1>
</template>
<div id="app">
<base-layer>
<p slot-scope="options">
{{message}}
{{options.first}}
{{options.last}}
{{options.value}}
{{options}}
</p>
<h3 slot="main">具名插槽</h3>
<template slot="footer">
<p>p footer</p>
<p>span footer</p>
</template>
<template slot="list" slot-scope="{item}">
<li>
{{item}}
</li>
</template>
<template slot="lists" slot-scope="opts">
<li v-for="item in opts.lists">
{{item + ' lists'}}
</li>
</template>
</base-layer>
</div>
<script>
/**
* 这里主要介绍了 Vue 插槽的废弃写法
* slot-scope 作用域插槽，能够让插槽内容，访问子组件中的数据，slot上绑定的数据。（已经废弃）
* 2.6.0 插槽引入了新写法 v-slot 统一了 slot、slot-scope
*/
Vue.component("BaseLayer", {
data() {
return {
list: [1, 2, 3, 4],
firstName: "科比",
lastName: "布莱恩特",
};
},
template:
`<div>
<div class="header">
header
<slot :first="firstName" :last="lastName" value="24">
默认插槽
</slot>
</div>
<div class="main">
main
<slot name="main"></slot>
</div>
<div class="footer">
footer
<slot name="footer"></slot>
<ul>
<slot name="list" :item="item" v-for="item in list"></slot>
<slot name="lists" :lists="list"></slot>
</ul>
</div>
</div>`
});
var app = new Vue({
el: "#app",
data: {
message: "插槽作用域"
},
methods: {}
});
var tmp = document.getElementById("tmp");
console.log(tmp.content);
</script>
</body>
</html>
网友评论