属性传值先写一段简单的代码<div id=“root”> <child content="<p>Dell</p>"></child></div>Vue.component(‘child’, { props: { content:String }, template: <div> <p>hello</p> <div v-html="this.content"></div> </div>,})let vm = new Vue({ el: ‘#root’})这种写法有两个问题：p标签外面会有一层div，这个div是无法去掉的，有人会想，能不能用template代替，其实是不可以的，在这里模版站位符是不能用的。如果content传递的内容很多，代码就会变得很难阅读。当我的子组件有一部分内容，是根据父组件传递过来的dom进行显示的话，这时候可以换一种语法。插槽slot<div id=“root”> <child> <p>Dell</p> //这种语法看起来非常像，用子组件，我向里插入内容 </child></div>Vue.component(‘child’, { props: { content:String }, template: <div> <p>hello</p> <slot></slot> //slot 标签显示的内容就是父组件向子组件插入进来的内容 </div>,})let vm = new Vue({ el: ‘#root’}) <p>Dell</p>这种语法看起来非常像，用子组我向里插入内容，所以我们把它叫做插槽。slot标签显示的内容就是父组件向子组件插入进来的内容。通过插槽可以更方便的向子组件传递dom元素，同时子组件只需通过slot来使用就可以了。slot其他功能如果子组件里没有dom元素，可以让它显示默认内容，如下：<slot>默认内容</slot>具名插槽如果现在有个需求是，header和footer是由外部引入的该怎么弄呢？如下<div id=“root”> <body-content> <div class=“header” slot=“header”>header</div> <div class=“footer” slot=“footer”>footer</div> </body-content></div>Vue.component(‘body-content’, { props: { content:String }, template: <div> <slot name="header"></slot> <div class="content">content</p> <slot name="footer"></slot> </div>,})let vm = new Vue({ el: ‘#root’})slot标签name属性对应的是组件中slot属性，通过这种写法，可以在调用子组件时，一次性传递多个区域的dom结构，在子组件里通过具名插槽来分别使用不同部分的dom结构