前端小栈

# slot 插槽

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

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

# a. 默认插槽

父组件中：
	<Category>
	   <div>html结构1</div>
	</Category>
	子组件中：Category
	<template>
	  <div>
     <!-- 定义插槽 -->
     <slot>插槽默认内容...</slot>
	  </div>
	</template>
1
2
3
4
5
6
7
8
9
10
11

# b. 具名插槽

父组件中：
<Category>
    <template slot="center">
      <div>html结构1</div>
    </template>

    <template v-slot:footer>
       <div>第二种写法</div>
    </template>
</Category>
子组件中：
<template>
    <div>
       <!-- 定义插槽 -->
       <slot name="center">插槽默认内容...</slot>
       <slot name="footer">插槽默认内容...</slot>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# c. 作用域插槽

scope用于父组件往子组件插槽放的html结构接收子组件的数据 注：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定 （games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

父组件中：
<Category>
    <template scope="scopeData">
        <!-- 生成的是ul列表 -->
        <ul>
          <li v-for="g in scopeData.games" :key="g">{{g}}</li>
        </ul>
    </template>
</Category>

<Category>
    <template slot-scope="scopeData">
        <!-- 生成的是h4标题 -->
        <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
    </template>
</Category>
子组件中：
<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# axios

// 解构赋值的时候，使用 : 进行重命名
// 1. 调用 axios 之后，使用 async/await 进行简化
// 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
// 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
const { data: res } = await axios({
method: 'GET',
url: ''
})
1
2
3
4
5
6
7
8

← 11.Vuex →