组件插槽,生命周期,轮播图组件的封装,自定义指令的封装等详解以及axios的卖座案例

3.组件插槽

3-1组件插槽

注意

插槽内容可以访问到父组件的数据作用域,因为插槽内容本身就是在父组件模版中定义的

插槽内容无法访问子组件的数据.vue模版中的表达式只能访问其定义时所处的作用域,这和JavaScript的词法作用域是一致的,换言之:

父组件模版的表达式只能访问父组件的作用域,子组件模版中的表达式只能访问子组件的作用域

3-2具名插槽

具名思意:就是给插槽取一个相同的名字,使它到相应的位置

案例

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Child.vue

1
2
3
4
5
6
7
8

3-3作用域插槽

在某些场景下,如果想要同时使用父组件和子组件区域内的数据,要做到这一点,就需要让子组件在渲染的时候,把数据提供给插槽,这就是作用域插槽

案例:通过axios获取猫眼的数据

注意点:

1. v-slot=“scope” 不能写在Film组件里面,如果写在Film里面就需要删掉template包装元素
2. v-slot=“{scope}”:还可以使用对象解析,因为传过来的是一个对象

App.vue(方式一)

1
2
3
4
5
6
7
8
9
10
11
12

Film.vue

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

''方式二

具名插槽与作用域联合使用

App.vue

	 
           
           
           
            
           
                

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Film.vue

 
      
        

            

                {{ data.nm }}
                
            
        
      
1
2
3
4
5
6
7
8
9

4.生命周期

每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM.在此过程中,它也会运行被称为生命周期钩子函数,让开发者有机会再特定阶段运行自己的代码

(1) beforeCreate()会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。(无法访问状态以及methods)

(2)created() 当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。(能访问到初始化,并且能做初始化)

(3)beforeMount()当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。(第一次创建最后能修改状态的地方)

(4)mounted()所有同步子组件都已经被挂载。这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用("挂载dom节点,初始化轮播,Echarts,setInterval,ajax)

只要状态改变,5和6函数就会被调用

(5)beforeUpdate()这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。(能访问到最新的状态,无法访问到更新后的dom)

(6)updated()这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。(访问到更新之后的dom)

(7)beforeUnmount()当这个钩子被调用时，组件实例依然还保有全部的功能。

(8)unmounted()在一个组件实例被卸载之后调用。

Echarts案例

npm i echars

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

//----------------跟随窗口,大小随着改变-----------------
    window.onresize = () => {
             this.myChart.resize()
      }
    },
    unmounted() {
        // 销毁实例
        window.onresize = null
   }
1
2
3
4
5
6
7
8
9

挂载在window上的东西,记得要销毁,使用unmound

5.组件的封装

轮播组件

App.vue

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
36
37
38
39
40
41
42
43
44

MySwiper.vue

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

MySwiperItem.vue

1
2
3
4
5
6
7
8

6.自定义指令

6-1指令写法&钩子

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑

全局注册自定义指令

main.js里面

CreateApp(App)
//自定义一个颜色的指令,这里写color就可以,使用指令需要加v-,就是v-color
.directive('color',{
    //挂载在mounted上
    mounted(el){
        //el是dom节点
        console.log(el);
       el.style.backgroundColor = 'red'
    }
})
.mount("#app")
1
2
3
4
5
6
7
8
9
10
11

App.vue(局部注册)

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

指令可以简写

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color">div>
1

color(el, binding) {
            el.style.backgroundColor = binding.value;
            },
1
2
3

指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21