默认插槽 ： <slot></slot> v-slot可以简写为# 但是后面必须跟表达式 eg ： v-solt：add === #add 

 1    <div id="app">
 2         <!-- 1  组件标签内写入内容 -->
 3         <first-child>hello world</first-child>
 4 
 5         <first-child>
 6             <p>hello world ==== {{msg}}</p>
 7             <ul>
 8                 <li>xiangmu</li>
 9                 <li>xiangmu</li>
10                 <li>xiangmu</li>
11                 <li>xiangmu</li>
12             </ul>
13         </first-child>
14     </div>
 1 <script src="./js/vue.global.min.js"></script>
 2     <script>
 3         const app = Vue.createApp({
 4             data(){
 5                 return{
 6                     msg:'hello vue3'
 7                 }
 8             }
 9         })
10 
11         const FirstChild = {
12             template:`
13                 <div>
14                     <p>默认的结构</p>
15                     <div class='wrap'>
16                         <slot></slot>    
17                     </div>
18                 </div>
19             `
20         }
21 
22         app.component('FirstChild', FirstChild)
23 
24         app.mount('#app')
25     </script>

 默认插槽也有名字 v-solt：default

eg：

 

posted @ 2022-07-13 14:15  请善待容嬷嬷  阅读(116)  评论(0)  编辑  收藏  举报