Vue ref属性，props配置项，mixin混入，scoped样式，slot插槽

ref属性

ref属性可以获取DOM元素,被用来给元素或子组件注册引用信息（id的替代者）

<h1 v-text='msg' ref='title'>h1>

<script>
methods:{
    showDom(){
        console.log(this.$refs.title)
    }
}
script>
1
2
3
4
5
6
7
8
9

• 如果给组件添加ref的话拿到的是组件的实例对象（vc）

• 如果给html标签添加ref的话拿到的是真实的DOM元素

props配置项

可以通过props把子组件的data传递给父组件

当组件复用，但是里面的属性需要使用不同的数据的时候，可以使用props配置项来实现。

父组件==>子组件 通信

子组件==>父组件 通信（要求父组件先给子组件一个函数）

• 传递数据
• 接收数据
  1. 只接收
     • props:[‘name’]
  2. 限制类型
     • props:{name:Number}
  3. 限制类型，限制必要性，指定默认值
     • props:{name:{type:String,required:true,defaule:"小明“}}

Student.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

App.vue

1
2
3
4
5
6
7
8

如果想要传入数字可以使用：age="18"这种v-bind的形式传入，因为v-bind传入的是引号内的内容

注意：

1. props是只读的，Vue底层会监测你对props的修改，如果进行了修改会发出警告（vue监视的是浅层次）
   • obj.a=12这种vue不会算作修改
   • obj={x:1,y:2}这种形式vue会算成修改
2. props的属性的优先级大于data属性的优先级
3. props传过来的若是对象类型，修改对象中的属性时Vue不会报错，但不推荐这样做
4. v-model绑定的值不能是props传递过来的值，因为**props是不可修改的**。

如果要修改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

mixin混入

两个组件共有的东西可以使用mixin进行混合复用，只需要在mixin中写一遍就行了。

mixin不会破坏你的代码，你的代码中有的mixin中也有那么以你的代码为主。

但是生命周期钩子来说都会使用。

mixin.js

export const mixin1={
    methods:{
        showName()
        {
            alert(this.name);
        }
    }
}

export const mixin2={
    x:1,y:2
}
1
2
3
4
5
6
7
8
9
10
11
12

School.vue

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

Student.vue

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

全局混合

在main.js中进行混合，那么在项目中所有的vc，vm都会得到mixin

//引入mixin
import {mixin1,mixin2} from '../mixin'

Vue.mixin(mixin1)
Vue.mixin(mixin2)
1
2
3
4
5

scoped样式

组件中的样式最终会汇总到一起，如果不同组件中有同名样式那么会发生冲突（后引入的会覆盖先引入的）

给style标签添加scoped标签那么就不会产生冲突。

scoped作用原理：给组件中的元素添加一个特殊的标签属性（该属性中的值为随机生成），该标签属性会和样式一起使用。

APP中的样式只有APP可以使用。

1
2
3
4
5
6
7
8
9
10
11

slot插槽

默认插槽

在组件template标签中使用

Category.vue

<template>
    
<slot>我是默认值，当使用者没有传递具体结构时我会出现slot>
template>
1
2
3
4

App.vue

1
2
3
4
5
6

具名插槽

当有多个标签需要插入的时候，这里可以使用具名插槽

Category.vue

1
2
3
4

App.vue

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

作用域插槽

当要使用的数据不在App组件，那么可以使用作用域插槽

Category.vue

1
2
3
4
5
6
7
8
9
10

App.vue

1
2
3
4
5
6
7
8
9
10