<!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">
<title>Document</title>
<style>
</style>
</head>
<!-- 数据驱动显示 -->
<body>
<div id="app">
<div>
<!-- 组件 -->
<todo-list :todos="todos">
<!-- 这个最典型的例子 就是 el-table 中使用插槽作用域 -->
<!-- 作用域插槽 slot-scope 这是之前的写法 vue官方已经废弃-->
<!-- <template slot-scope="{data}">
{{data}}
</template> -->
<!-- 这是最新的写法 -->
<template v-slot="scope">
{{scope}}
</template>
<!-- 数据的显示风格让用户自己定义
太牛逼了 !!!! -->
</todo-list>
</div>
</div>
<template id='tem'>
<fieldset>
<legend>{{word}}</legend>
</fieldset>
</template>
<script src="../../vue.js"></script>
<script>
Vue.component('first-com', {
data() {
return {
word: '插槽',
arr1: ['真真', '爱爱', '怜怜'],
arr2: ['悟空', '八戒', '达摩'],
}
},
template: "#tem",
})
Vue.component("todo-list", {
inheritAttrs: false,
props: {
todos: [Array, Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
<slot :data="todo">{{todo.text}}</slot>
</li>
</ul>
`
})
// root组件
const vm = new Vue({
el: '#app',
data: {
name: 'root组件',
word: '岁月的童话',
todos: ['真真', '爱爱', '怜怜'],
},
});
/*
slot 插槽
*/
</script>
</body>
</html>
未完待遇…
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
