父子通信,动态组件,异步加载组件

2.组件基础

2-1父传子props

父传子:水往低处流(单向绑定的原则),子不能修改父传过来的属性,它是只读的,但是可以使用监听和计算属性进行修改

父组件

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

子组件

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

2-2属性验证&默认属性

export default {
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 自定义类型校验函数
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}
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

2-3子传父:$emit

如果 在vue中要用sass,需要安装这个模块,npm i sass

在子页面通过$emit进行传值,在父页面通过event事件进行获取值

子组件

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

子组件

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

2-4$refs-父组件的强权

• ref如果绑定在dom节点上，拿到的就是 原生dom节点
• ref如果绑定在组件上，拿到的就是 组件对象，可以实现通信功能

父组件

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

子组件

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

2-5 KaTeX parse error: Expected 'EOF', got '&' at position 7: parent&̲root - 子组件的无法无天

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子组件

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

2-6.跨级通信provide和inject

provide 和 inject 是 Vue.js 中用于跨组件通信的一对高级特性。它们允许祖先组件（提供者）向所有后代组件（使用者）传递数据，而不需要通过 props 或事件的方式。

provide ,inject 搭配组合式api使用，具备响应性

provide ,inject 搭配选项式使用， 没有响应性， 把app组件实例

父组件

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

navbar

1
2
3
4
5
6
7
8
9
10
11

tabber

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

2-7动态组件 - 墙头草

在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 `` 内置组件将这些动态组件包装起来：

  
    
        
    
1
2
3
4
5
6
7
8

  




  




  

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

2-8异步组件(按需加载)

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能：

//----------------异步组件(按需加载)提高性能-----------------
import { defineAsyncComponent } from 'vue'
 components: {
        navbar,
        tabber,
        Center,
        // 这样定义以后,这两个页面,在一开始不会加载,直到使用了之后才会有缓存
        // **加载与错误提示**
        Home: defineAsyncComponent( () => import('./components/Home.vue')),
        List: defineAsyncComponent({
              //   // 加载组件
              loader: () => import('./components/List.vue'),
             // 加载异步组件时使用的组件
         loadingComponent: LoadingComponent,
         // 展示加载组件前的延迟时间，默认为 200ms
         delay: 0,
         // 加载失败后展示的组件
         errorComponent: ErrorComponent,
         // 如果提供了一个 timeout 时间限制，并超时了
         // 也会显示这里配置的报错组件，默认值是：Infinity
         timeout: 3000
        }),
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23