<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> x</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.bg_color_odd{
background-color:#0fa367;
}
.bg_color_even{
background-color:#f1f309;
}
.demo-alert-box{
background-color:#ff9931;
}
</style>
</head>
<body>
<h1>component</h1>
<h2> slot</h2>
<hr>
https://www.cnblogs.com/cisum/p/9618346.html
<div id="app">
<alert-box alert-am="abcd">
<alert-am alertmessage="cde"></alert-am>
</alert-box>
<!-- 具名-->
<named-slot>
<span slot='first'>slot first .</span>
<br>
<span slot='second'>slot second .</span>
</named-slot>
<!-- scope-->
<todo-list v-bind:todos="todos">
<template slot-scope="scope">
<p>ALL：{{JSON.stringify(scope)}}</p>
<p>K:{{scope.k}}</p>
<p>V:{{scope.v}}</p>
</template>
</todo-list>
</div>
<script type="text/javascript">
Vue.component('named-slot', {
template: `
<div class="demo-alert-box">
<strong>named-slot!</strong>
<slot name='first'></slot>
<slot name='second'></slot>
</div>
`
})
Vue.component('todo-list', {
template: `
<ul>
<li v-for="(k,v) in todos" >
<slot :k="k" :v="v" ></slot>
</li>
</ul>
`,
props:['todos']
})
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Vue.component('alert-am', {
props:['alertmessage'],
template: `
<p><strong>{{alertmessage}}</strong></p>
`
})
var app = new Vue({
el: "#app",
data:{
xmessage: 'ABC' ,
postFontSize:1,
isToggle:true ,
todos:{1:'A',2:'B',3:'C'}
},
methods:{
}
})
</script>
</body>
</html>