<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在Vue中使用插槽(slot)</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>"></child> -->
<!-- 插槽(slot) -->
<child>
<!-- 父组件内可以传递插槽内容。 -->
<h1>Dell</h1>
</child>
</div>
</body>
<script>
// 使用插槽(slot)，子组件更方便的给父组件传递dom数据。
// 全局组件，子组件
Vue.component('child', {
// props:['content'],
// p标签外层多了一个div标签
// template:`<div>
// <p>hello</p>
// <div v-html="this.content"></div>
// </div>`
template:`<div>
<p>hello</p>
<slot>默认内容</slot>
</div>`
});
var vm = new Vue({
el:'#root'
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在Vue中使用插槽(slot)</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="root">
<child>
<!-- 父组件内可以传递插槽内容。 -->
<!-- 头部 -->
<div class="header" slot="header">header</div>
<!-- 尾部 -->
<div class="footer" slot="footer">footer</div>
<!-- 默认值 -->
</child>
</div>
</body>
<script>
// 使用插槽(slot)，子组件更方便的给父组件传递dom数据。
// 注意：插槽要取名字，不然调用多次相同内容。具名插槽可以有多个。
// 父组件没有传值是，用默认值。
// 全局组件，子组件
Vue.component('child', {
data:function(){
return{
}
},
template:`<div>
<slot name="header"></slot>
<div class="content">content</div>
<slot name="footer"></slot>
<slot name="moren">
<h1>default</h1>
</slot>
</div>`
});
var vm = new Vue({
el:'#root'
});
</script>
</html>