Vue中插槽的使用

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2.分类：默认插槽、具名插槽、作用域插槽

3.使用方式：

　　①默认插槽      当父组件没有插入时，插槽显示默认内容（一般slot标签内部不写内容）

父组件中：
        <Category>
           <div>父组件使用插槽后的内容</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

　　②具名插槽   使用场景很多

 1 父组件中：
 2     <HelloWorld>
 3       <template slot="center">   <!--1. 这种写法废弃  -->
 4         <div>html结构1</div>
 5       </template>
 6 
 7       <template v-slot:footer>  <!--2. 新写法  #footer   -->
 8         <div>html结构2</div>
 9       </template>
10     </HelloWorld>
11 子组件中：
12         <template>
13             <div>
14                <!-- 定义插槽 -->
15                <slot name="center">插槽默认内容...</slot>
16                <slot name="footer">插槽默认内容...</slot>
17             </div>
18         </template>

　　③作用域插槽

  •   数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，比如两个地方都需要使用这个子组件，但是在子组件需要展示不同是数据结构，可以通过这个方法解决。
 1 //父组件根据子组件的数据生成对应的结构插入到子组件中去
 2 <template>
 3   <div>
 4     <HelloWorld :tableData="tableData">
 5       <template v-slot:default="scope">     新写法 #default="scope"
 6       {{scope.data.name}}              //data是子组件slot传过来的值
 7       </template>
 8     </HelloWorld>
 9   </div>
10 </template>
11 
12 <script>
13 import { reactive, toRefs } from "vue";
14 import HelloWorld from "../components/HelloWorld.vue";
15 export default {
16   components: { HelloWorld },
17   setup() {
18     const state = reactive({
19       tableData: [
20         {
21           date: "2016-05-02",
22           name: "王小虎",
23           province: "上海",
24           city: "普陀区",
25           address: "上海市普陀区金沙江路 1518 弄",
26           slot: 'data',
27         },
28         {
29           date: "2016-05-04",
30           name: "王小虎",
31           province: "上海",
32           city: "普陀区",
33           address: "上海市普陀区金沙江路 1517 弄",
34           zip: 200333,
35            slot: 'name',
36         },
37         {
38           date: "2016-05-01",
39           name: "王小虎",
40           province: "上海",
41           city: "普陀区",
42           address: "上海市普陀区金沙江路 1519 弄",
43           zip: 200333,
44         slot: 'province',
45 
46         },
47         {
48           date: "2016-05-03",
49           name: "王小虎",
50           province: "上海",
51           city: "普陀区",
52           address: "上海市普陀区金沙江路 1516 弄",
53           zip: 200333,
54            slot: 'address',
55         },
56       ],
57     });
58 
59     return {
60       ...toRefs(state),
61     };
62   },
63 };
64 </script>
65  
66 //子组件将数据传递给父组件
67 <template>
68   <div>
69     <li v-for="(item, index) in tableData" :key="index">
70       <slot :data="item" :index="index"></slot>
71     </li>
72   </div>
73 </template>
74 
75 <script>
76 import { reactive, toRefs } from "vue";
77 
78 export default {
79   props: ["tableData"],
80   setup() {
81     const state = reactive({
82       count: "子组件",
83     });
84 
85     return {
86       ...toRefs(state),
87     };
88   },
89 };
90 </script>
91  
92 <style>
93  
94 </style>

 

posted @ 2022-07-06 13:11  顺·  阅读(207)  评论(0)  编辑  收藏  举报