VueDay03动态组件，插槽的运用
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。
下面是简单的一个插槽的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<alert-com :html='content'></alert-com>
<!-- slot里面的内容变量只跟父元素有关 -->
<alert-com1>
<p>小心我,{{content}}</p>
</alert-com1>
</div>
<script type="text/javascript">
Vue.component('alert-com',{
props:['html'],
template:`
<div class="alert">
<h1>温馨提示</h1>
<div class="content">
{{html}}
</div>
</div>
`
})
Vue.component('alert-com1',{
template:`
<div class="alert">
<h1>温馨提示</h1>
<div class="content">
<slot></slot>
</div>
</div>
`,
data:function(){
return{
abc:"abc123"
}
}
})
let app = new Vue({
el:"#app",
data:{
content:"小心熊出没"
}
})
</script>
</body>
</html>
动态组件的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<div id="content">
<component :is="com"></component>
</div>
<button @click="chooseContent(1)">首页</button>
<button @click="chooseContent(2)">列表页</button>
<button @click="chooseContent(3)">新闻</button>
<button @click="chooseContent(4)">个人</button>
</div>
<script type="text/x-template" id="hello-world-template">
<div>
<h1>首页内容</h1>
<p>Hello hello hello vue</p>
</div>
</script>
<script type="text/javascript">
let com1 = Vue.component("index-com",{
name:'index',
template:'#hello-world-template'
})
let com2 = Vue.component("list-com",{
template:`
<h1>列表内容</h1>
`
})
let com3 = Vue.component("news-com",{
template:`
<h1>新闻内容</h1>
`
})
let com4 = Vue.component("me-com",{
template:`
<h1>个人中心内容</h1>
`
})
let app =new Vue({
el:"#app",
data:{
com:com1
},
methods:{
chooseContent:function(id){
console.log(id)
console.log(this)
// 通过获取ID选择注册好的组件，实现动态内容渲染
this.com = this.$options.components['com'+id]
}
},
components:{
com1,com2,com3,com4
}
})
</script>
</body>
</html>
