01 插槽的基本使用
<body>
<!-- 组件的插槽是为了封装的组件更加具有扩展性 -->
<!--
1.插槽的基本使用 组件中声明<slot></slot>
2.插槽的默认值 组件中使用 <slot><button>案例</button></slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
<div id="app01">
<cpn></cpn>
<cpn><a href="www.baidu.com">我可以替换组件中的默认插槽</a></cpn>
<cpn>
<h3>多个值替换，同时放入到组件中替换插槽</h3>
<h4>多个值替换，同时放入到组件中替换插槽</h4>
<h5>多个值替换，同时放入到组件中替换插槽</h5>
</cpn>
</div>
<template id="cpn">
<div>
<h3>我是组件</h3>
<p>哈哈哈</p>
<slot><button>我是默认按钮</button></slot>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app01",
data:{
message:'hello world'
},
components:{
cpn:{
template:"#cpn"
}
}
})
</script>