Vue 教程(二十四)slot 作用域
Posted _否极泰来_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(二十四)slot 作用域相关的知识，希望对你有一定的参考价值。
Vue 教程(二十四)slot 作用域
- 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>slot作用域</title>
</head>
<body>
<div id="app">
<language-component>
<template slot-scope="slot">
<div>{{slot.data.join(' - ')}}</div>
</template>
</language-component>
<language-component>
<template slot-scope="slot">
<div>{{slot.data.join(' * ')}}</div>
</template>
</language-component>
<language-component>
<template slot-scope="slot">
<div>{{slot.data.join(' # ')}}</div>
</template>
</language-component>
</div>
<template id="languageTemplate" slot-scope="slot">
<slot :data="languages">
<ul>
<li v-for="(item, index) in languages">{{item}}</li>
</ul>
</slot>
</template>
<script>
const languageComponent = {
template: "#languageTemplate",
data() {
return {
languages: [
"C",
"Java",
"Python",
"C++",
"C#",
"Visual Basic",
"php",
"R",
"Groovy",
],
};
},
};
const app = new Vue({
el: "#app",
components: {
languageComponent,
},
});
</script>
</body>
</html>
– 以上为《Vue 教程(二十四)slot 作用域》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。
——厚积薄发(yuanxw)
以上是关于Vue 教程(二十四)slot 作用域的主要内容，如果未能解决你的问题，请参考以下文章
Vue 作用域插槽slot slot-scope v-slot