App.vue
<template>
<div id="app">
<!-- slot已过时
<A>
<div slot="a">
<h2>{{msg1}}</h2>
</div>
<div slot="b">
<h2>{{msg2}}</h2>
</div>
</A>-->
<A>
<!--
1.这里的v-slot后面的值a,b可以随便取，子组件slot中的name要对应该值。
2.还有msg1和msg2只能由当前的App.vue提供，不能由A.vue提供
3.在template外写其他东西，是不会显示的。
-->
<template v-slot:a>
<h2>{{msg1}}</h2>
</template>
<!-- 添加scope后，子组件可以传值向父组件传值 -->
<template v-slot:b="scope">
<h2>{{msg2}}</h2>
<h2>{{scope.msg33}}</h2>
</template>
</A>
</div>
</template>
<script>
import A from "./components/A";
export default {
name: "app",
components: {
A
},
data() {
return {
msg1: "23333",
msg2: "666666"
};
}
};
</script>
<style scoped>
/* 关与CSS样式，虽然父组件和子组件都可以设置样式，同时设置，父组件会覆盖子组件的样式。看具体的情况设置样式。 */
h2 {
background: #30b031;
}
</style>
A.vue
<template>
<div class="a">
<slot name="a" />
<h1>Hello Vue</h1>
<!-- 这里的msg33名字随意取 -->
<slot name="b" :msg33="msg3" />
</div>
</template>
<style scoped>
h2 {
background: #f5c700;
}
</style>
效果:
v-slot插槽.png
