【Vue 快速入门系列】ref、props、mixin、插件使用、样式混合解决方案合集

[db:作者]

文章目录

前言

一、ref属性的使用

二、props配置

三、mixin混合语法

1.简介

2.使用方法

3.注意点

4.结合实例使用

①全局混入

②局部混入

四、插件的使用

1.插件语法

①定义插件

②引入插件并使用

2.上手插件

五、样式混合问题

前言

在前面介绍到了Vue的一些基本概念与如何使用Vue，并通过node中的npm 使用vue脚手架（vue-cli）搭建了一个简单的Vue应用，其实所有的Vue项目搭建的时候都是换汤不换药。今天将会介绍几个Vue中常用的配置，他们的大致功能如下：

ref 作用是将dom元素选择出来，对普通标签来说与document.getElementById(“xxx”)是一回事，对自定义组件来说会将Vue Componentd对象选择出来，获取到VC对象也就可以获取到其中的dom元素了。

props 作用是父组件向子组件传递数据（当父组件有更新的时候子组件也会有更新）

mixin 将组件公共部分提取出来，哪里用到就在哪里引用

插件别人写好的js文件，我们只需引入并use即可（这里要区分好组件与插件）

样式混合如果给组件的style不加scoped将会导致样式的混乱
有了大概的预览之后就可以进行深一步的学习了，将会配合一些代码实例进行叙述。

一、ref属性的使用

& C' |$ R% ?: k& e 大家在学习css的时候学过各种选择器，也学过使用css选择器将dom元素选择出来，这个属性的话起到的作用就是将想要的dom元素选择出来，根据ref属性可以很轻松的找到dom元素。- X5 |* N4 E# ]" y5 a/ a6 ]0 ]7 {
' I% P8 t7 ~& Y. E

[ol]

被用来给元素或子组件注册引用信息（可以认为是id的替代者）

标记在html标签上可以获取真实DOM元素

标记在组件标签上可以获取组件实例对象（vc）

一句实例对象可以进行自己想要的操作

使用方式：
[ol]

给元素打标识：
①. .....
②.
③.

获取元素：this.$refs.xxx[/ol] [/ol]
结合以下实例代码：
App.vue


   Hello World

   点我体验ref


Student.vue


   我的名字是：{{name}}
   我的年龄是：{{age}}

[img][/img]



.demo{
background-color: rgb(173, 167, 167);
}

20221246.png

20221247.png

二、props配置
[ol]

功能：让组件接收外部传过来的数据

传递数据：

接收数据：
[ol]

第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
[/ol]
   % {) ~$ z6 J9 e! F! I/ U4 R; f/ E
注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制(将数据复制到其他对象内)props的内容到data中一份，然后去修改data中的数据。props接收到的对象被替换掉会有waring 但是props对象内部的属性被替换掉编译器不会发现，但是我们一般不这么做。因为存在隐患。
0 z/ ]$ G  w1 J, S* g" |9 P
$ b( ~9 ?; C; m+ [  M   [/ol]
当父组件中传给子组件的属性发生改变时，会触发模板的重新解析，如图所示。改变的是父组件传过去的name，会引起子组件接受到的属性发生改变。

20221248.gif

代码如下：

App.vue



   点我改变传过去的props


Student.vue

      我的名字是:{{name}}
      我的名字是:{{newAge}}岁了
      点击我进行年龄加1

.data{
background-color: rgb(202, 190, 190);
}

三、mixin混合语法
1.简介

4 F( Y: l) o/ e% n8 n$ f. I1 } mixin可以大大的提升代码的利用率,把多个组件需要的功能提出到一个文件内* H' O; a3 c5 I) G/ {% Y# f
如果mixin限定在main.js上，那么这个程序所有组件都会有% M' Q1 d4 D  h/ n

7 Z; V2 M" C/ _' U/ |$ Z2 u1 o! D- @
2.使用方法
[ol]

在mixin.js中定义要混合的代码，组件中引入，并显示调用mixin属性mixins:[]其中mixin后面跟的必须是一个数组

在main.js中开启全局配置[/ol]
3.注意点
如果你的组件中定义了与mixin中相关的代码，脚手架会以你定义的代码为基础（也就是组件中定义的代码优先级大）
但是一些特殊函数例外，比如mounted挂载函数。声明周期函数会先执行混入代码再执行自定义的代码

4.结合实例使用
混入的生命周期函数会先执行，然后执行组件内定义的生命周期函数，普通函数是以组件内定义的为基础，如果组件内没有定义会以混入的函数为基础，如果两个地方都没定义就会抛出异常。

20221249.png

①全局混入
全局混入通常在main.js中进行定义，然后在所有的组件中均可以使用（不需要再定义属性mixin）
语法如下：
main.js

// 导入即将混合的代码
import {mixin1,mixin2} from "./mixin"
// 开启全局的混入（合）
Vue.mixin(mixin1)
Vue.mixin(mixin2)

②局部混入
局部混入的代码需要先进行mixin的引入，然后将其写进Vue Component对象的属性内也就是前面使用方法中介绍到的mixins:[xxx,xxxx]。
下面是App.vue中的一部分代码：

import {mixin1,mixin2} from "./mixin"
export default {
name:"App",
components:{
      Student,
      School
},
mixins:[mixin1,mixin2]
}

当然在体验局部混入跟全局混入的区别时，也可以通过以下一个实例：
当打开全局混入时，不必使用mixins，即使使用了mixins，普通函数会以你定义的代码为基础。
test.html

Vue 测试实例 - 菜鸟教程(runoob.com)

5 w$ O  Y& M( b/ g& |9 n1 H8 C3 h) w0 U) S8 F3 T

四、插件的使用
对vue的一种增强,包含一个install方法的对象，install方法第一个参数是vue，第二个以后的参数是使用者传递的参数

1.插件语法
①定义插件
```js
const plugins={
// 这里install其实是一个属性
install(vue,x,y,z){
....
}
}
export plugins
```

②引入插件并使用
import ... from ....
Vue.use(...,参数1,参数2....)

2.上手插件
自定义插件一般放在plugins目录下，网络上也有许多大牛定义的插件，只需引入使用即可；接下来带大家自定义一个插件，并导入Vue项目进行使用。

plugins.js

const plugins={
install(Vue,x=0,y=0,z=0){
console.log(x,y,z)
//全局过滤器
// 使用到这个过滤器的地方将会只显示列表中的前四个元素
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义全局指令
Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//给Vue原型上添加一个方法（vm和vc就都能用了）
Vue.prototype.Hello = ()=>{alert('你好啊')}
}
}
//暴露出去
export default plugins

引入并使用插件
main.js

import App from "./App.vue"
import Vue from "vue"
//导入插件
import plugins from "./plugins"
//注册插件
Vue.use(plugins)
new Vue({
el:"#App",
render:h=>h(App)
})

使用插件中的自定义指令


   姓名：{{name}}
   年龄：{{age}}

: i5 D7 Y7 W  U4 A
% T" [0 }. j# O# ^: X2 R1 `, B1 K7 G# R, x2 c: i
& `4 e  J, N  R

" i  P( _5 W* a' G& c8 _2 S9 Q 1 u! C5 ^. U* A6 Y+ n8 n1 t( k; |
五、样式混合问题
  I  @: p. d+ U6 ]描述：不同组件中如果使用相同的class，会导致出现样式覆盖的问题，覆盖规则是父组件覆盖子组件子组件根据导入顺序，新的覆盖旧的。可以使用不同的类名进行区分解决问题，也可以使用scoped属性,对style属性我们还可以使用lang进行指定，我们是用Less还是用css
  x1 R  F2 T3 Y1 N: z7 I 原理：scoped会根据经纬度、时间、使用电脑型号等生成一个唯一id，然后将这个id插入到对应的标签内. [1 `' [: i) O& }( j0 N' b* W
再将相应的样式转换为标签属性选择器，进行样式语言的限定。默认选择css样式语言; p6 V+ n# y3 j
- B, X' M3 e6 G! ^  G1 g! i7 e
.demo{' h8 j4 L. l3 t0 k3 A& k; k+ _& E
background-color: red;
0 a  R, i1 x  _0 c0 |}' @8 C' p% T$ b* b

! \3 W. N- A- }9 U3 P$ e. Q3 A" I6 e
2 Z4 e' z. v, M) V9 D( |9 l) c, w, |至此这几种属性或者使用语法就介绍完了，大家有啥疑问或者好的想法欢迎评论区留言。
7 f6 Q, T) i* Q3 c8 }- T, X
8 b6 c# ]5 T* w7 O+ e6 K

20221250.gif

我可爱的太阳 · 发表于 2022-12-12 17:59:48

在撸一遍。。。

邵奇微 · 发表于 2022-12-12 18:02:44

向楼主学习

其明 · 发表于 2022-12-12 18:05:25

路过

就一句 · 发表于 2022-12-12 18:08:40

学习IT中

思恋的风 · 发表于 2022-12-12 18:10:24

看起来好像不错的样子

真实的自我 · 发表于 2022-12-12 18:12:38

佩服佩服！

韩潮 · 发表于 2022-12-12 18:16:07

非常好，顶一下

晨曦余痕 · 发表于 2022-12-12 18:19:06

前排支持下了哦~

李三三 · 发表于 2022-12-12 18:20:31

非常好，顶一下

【Vue 快速入门系列】ref、props、mixin、插件使用、样式混合解决方案合集

[db:作者] LV1