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>
/* 關(guān)與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
