深圳网站建设开发/怎么做一个网站页面
slot插槽
Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。使用slot插槽,可以更好的实现组件复用。
具名插槽
可以将内容进行细分，指定内容放置的插槽位置。
作用域插槽
可以让内容使用插槽中绑定的数据，而不是父级中的变量。
示例代码（参照上面的解释及代码注释理解代码）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>插槽</title><style>#app {width: 500px;margin: auto;border: 1px solid blue;border-radius: 10px;}#wrapper1,#wrapper2,#wrapper3 {width: 400px;margin: 20px auto;border: 1px solid red;border-radius: 8px;padding-left: 10px;}</style><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head><body><div id="app"><child1><!--注意:要使用父级作用域中的变量,比如msg--><h2>今日头条</h2><p>详情{{msg}}</p><p>新闻评论</p></child1><child2><h1 slot="header">这是一个h1标题</h1><h2 slot="main">这是一个h2标题</h2><!--没有指定名字的,会插到没有名字的插槽中--><p>这是一个标签,没有指定slot</p><footer slot="footer">这是一个h5新增的footer标签</footer></child2><child3><template slot-scope="prop"><p>备注：没有slot-scope,那么该范围的变量都是父级作用域的,有slot-scope,那么相当于使用的是给slot中绑定的变量</p><p>显示插槽中的text:{{prop.text}}</p><p>显示插槽中的num:{{prop.num}}</p></template></child3></div>
</body>
<template id="child1"><div id="wrapper1"><h1>这是子组件1</h1><!-- 用来接收写到子组件标签内部的内容,放到slot当中 --><slot>当你不写内容时,会显示</slot></div>
</template>
<!--具名插槽-->
<template id="child2"><div id="wrapper2"><slot name="header"></slot><slot name="main"></slot><slot></slot><slot name="footer"></slot></div>
</template>
<!--作用域插槽-->
<template id="child3"><div id="wrapper3"><slot :text="szStr" :num="nNum"></slot></div>
</template></html><script>/** 使用slot插槽,可以更好的实现组件复用*/let child1 = {template: '#child1'};let child2 = {template: '#child2'};let child3 = {template: '#child3',data() {return {szStr: '幸福',nNum: 137}}};new Vue({el: '#app',components: {child1,child2,child3},data: {msg: '+摘要'}})
</script>