插槽给子组件增加内容，插槽可以设置默认值
在子组件中template中插槽写法 <slot></slot>
slot标签内可以添加name属性，要与html中的slot值对应起来
（要是子组件html之间没有写内容，又想显示某个值，可以使用slot默认值：<slot>默认值</slot>）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<body-content>
<div slot="header">header</div>
<div slot="footer">footer</div>
</body-content>
</div>
<script>
Vue.component("bodyContent",{
template:`<div>
<slot name=‘header‘></slot>
<div>content</div>
<slot name=‘footer‘></slot>
</div>`
});
var app = new Vue({
el:‘#app‘
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/feiyangyao/p/11167048.html
时间： 2024-08-30 14:46:35