<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<cpn>
<!-- 插槽-插入 -->
<!-- 注意，由于编译作用域的概念，这里是在#app的作用域，所以这里showIt使用的是app实例对象的属性 -->
<span slot="center" v-show="showIt">
你好
</span>
</cpn>
</div>
<template id="cpn">
<div>
<span>左边</span>
<!-- slot：插槽 name="center"给插槽具名 -->
<slot name="center">
<!-- 插槽默认值 -->
<span>中间</span>
</slot>
<span>右边</span>
</div>
</template>
<script>
// 组件的插槽：
// 组件的插槽也是为了让我们封装的组件更具扩展性
// 让使用者可以决定组件内部的一些内容到底显示什么
const app = new Vue({
el: "#app",
data: {
message: '你好啊',
showIt: 1
},
/*注册组件*/
components:{
cpn: {
template: '#cpn',
}
},
})
</script>
</body>
</html>
