依然是看注释的12345点
<!DOCTYPE html>
<html>
<head>
<title>插槽</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.以前我们如果想要往子组件中添加元素只能通过父子组件传递数据的方式 -->
<!-- <contents contents1="<h1>World</h1>"> -->
<!-- 2.其实可以，首先在子组件中添加相应的元素 -->
<contents>
<!-- 4.如果需要插入多条元素。那就需要给元素取名字。不然在子组件的模板内会出现每个出现<slot>元素的地方都会出现2条数据 -->
<div slot="Dell">Dell</div>
<div slot="World">World</div>
</contents>
</div>
</body>
<script>
Vue.component('contents', {
// props:['contents1'],
// template: `<div>
// <!-- 3.然后在组件模板中使用<slot>标签 -->
// <slot></slot>
// <!-- 2.然后在子组件中使用v-html来接收 -->
// <div v-html="this.contents1"></div>
// <p>Hello</p>
// </div>`
//
template: `<div>
<!-- 5.名字要与父组件传递进来的插槽名字一样 -->
<slot name="Dell">Hello World</slot>
<p>Hello</p>
<slot name="World">Hello World</slot>
<!-- 6. 插槽支持默认值。当没有相对应的插槽传入的时候他会显示默认值 -->
<slot name="11111">Hello World</slot>
</div>`
})
var vm = new Vue({
el: '#app'
})
</script>
</html>
![Vue - 安装Node.js（配置环境变量、配置NPM下载存放目录、NPM设置镜像仓库）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)