2021前端技术面试必备Vue:(二)组件篇

海军 等级 289 2 0

2021前端技术面试必备Vue:(二)组件篇

上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念--组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。 当第一章基础掌握差不多了,然后再学习了组件的开发,那么你就可以开发简单的Vue项目,路由文章还没有更新,学习完Router后,就可以开发实战项目了。

组件探索

组件命名两种格式
1. kebab-case
my-component-name

2. PascalCase
MyComponentName

Prop

Prop 命名格式

​ 命名使用kebab-case (短横线分隔命名) 命名:

​ 如果 使用 驼峰命名 postTitle ==》 post-title

Prop 类型约束

默认我们传递时是Prop 为 字符串数组形式;为了更好的管理Prop, 我们可以以对象的形式进行管理。

props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}


Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
Prop 传递值

任何类型的值都可以传给一个 prop。

单向数据流

​ 父级组件状态发生变化,子组件会随着父级组件变化为最新的状态。反过来不可以,子级组件发生变化,父级组件跟真变化,这样Vue会发出警告

禁用Attribute继承

​ 默认可以给子组件传递任意的 Attribute ,然后子组件接收使用 Attribute。

​ 但有时,我们想限制给子组件传递 Attribute, 那么该怎么做呢?

  1. 首先, 我们应确认子组件要接收哪些Props
  2. 然后, 在子组件中 定义这个 属性, inheritAttrs: false, 则 就禁止Attribute继承

这样做的目的是为了什么呢?

​ 别人在接手开发时,他只能传递只定的Props,不能传递其它的Props

Vue.component('my-component', {
inheritAttrs: false,
// ...
})

自定义事件 使用

事件名

1.事件名不存在任何自动化的大小写转换。

2.触发的事件名需要完全匹配监听这个事件所用的名称。

Vue 官方推荐 事件命名采用 kebab-case

this.$emit('to-A','参数')


<A @to-A='父级的自定义事件'></A>

methods:{
receiveSon:(e){
接收传递过来的参数
console.log(e)
}
}

插槽

​ 所谓插槽:就是 在Vue中, 子组件定义了 <slot></slot> , 它就相当于在父组件占据了位置,你可以往里面插入任何数据,可以定义多个slot。

slot 又分为: 具名slot 默认slot 作用域slot

具名插槽

​ 所谓具名插槽, 就是 插槽有自己的name, 在子组件中定义好,可以在父组件中通过指定来渲染

​ 格式:

​ 使用:

  1. 先定义好插槽在子组件中
  2. 在父组件中引入组件,然后在子组件中插入即可
  3. 3

注意:

在使用具名插槽和作用域插槽时,Vue 官方 已经废弃了 slot 和 slot-scope 的使用, 可以 使用 v-slot 指令

// 子组件

<template>
<div>
//具名插槽
<slot name="head"></slot>
<h1>Son 组件</h1>
// 默认插槽
<slot></slot>
<Button @click="toParent">子向父 传递值</Button>
<slot name="foot"></slot>
</div>

</template>




//父组件

<template>
<div>
<h1>Father 组件</h1>
<hr>
<Son @receiveToParent="receiveToSon">
<template v-slot>
<h1>我是默认插槽</h1>
</template>
<template v-slot:head>
<hr>
<h1>我是具名插槽 head</h1>
<hr>
</template>
<template v-slot:foot>
<hr>
<h1>我是具名插槽 foot</h1>
<hr>
</template>
</Son>

</div>
</template>
作用域插槽

有时,我们可能遇到这种需求:

在插槽内容中能够访问子组件数据,那么就用到作用域插槽。

简单的说: 父组件在子组件中使用子组件提供的prop数据

如何使用呢?

​ 1.通过 在子组件 slot 中动态绑定数据 <slot :obj='obj'></slot>

  1. 在父组件中使用的方法两种

(1)v-slot:default = "son" 使用prop中数据 {{son.obj.name}}

(2)v-slot= "{obj}" 使用prop中数据 {{obj.name}}

优先采用第二种,这样可以使模板更简洁,尤其是在该插槽提供了多个 prop 的时候。
注意

默认插槽的缩写语法不能和具名插槽混用会导致作用域不明确

出现多个插槽,可以要使用多个template

// 子组件
<template>
<div>
<slot :obj='obj'></slot>
<slot :obj='games'></slot>
</div>

</template>
<script>
export default {
name: 'Son',
data () {
return {
name: '测试',
obj: {
name: '张三',
age: 22
},
games: {
version: '版本:0.1',
name: '王者农药'
}
}
},

}
</script>





//父组件
<template>
<div>
<h1>Father 组件</h1>
<hr>
<Son @receiveToParent="receiveToSon">
// 通过v-slot:自定义 = “{}” 使用prop数据
<template v-slot:default= "{obj}">
{{obj.name}}
</template>
<templatev-slot:other= "{games}">
{{games.name}}
</template>
<template v-slot:head>
<hr>
<h1>我是具名插槽 head</h1>
<hr>
</template>

</Son>
</div>
</template>
插槽简写
 <template #head>
<hr>
<h1>我是具名插槽 head</h1>
<hr>
</template>

动态组件

组件上使用 keep-alive 来达到缓存效果

可能你遇到这种需求,第一次点击了首页,然后点击个人主页,返回的时候,首页组件会被重新加载,浪费必要的性能问题,想解决此类为题,Vue中 提供了 在 组件上 动态绑定 keep-alive 来处理

需要在router中设置router的元信息meta
  {
path: '/',
name: 'Father',
component: Father,
meta: {
keepAlive: true // 需要缓存
}
}
使用$route.meta的keepAlive属性进行判断
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
//这里需要缓存,使用keep-alive标签包裹
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//这里不需要缓存
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

</el-col>

父组件 向 子组件 传递值 通过在子组件 身上动态绑定传值
三部曲:“
1. 先引入 子组件
2. 注册 子组件
3. 使用子组件 传值


例如:

<template>
<div>
<h1>Father 组件</h1>
<hr>
// 这块动态传递了一个数组对象
<Son :list = list @receiveToParent="receiveToSon"></Son>
</div>
</template>

<script>
import Son from './Son'
export default {
name: 'Father',
components: {
Son
},
data () {
return {
list: [
{ title: '小张中彩票了', author: 'Mr.Liu' },
{ title: '房价跌倒谷底', author: 'Mr.Liu' },
{ title: '阿里云便宜了', author: 'Mr.Liu' }
]
}
},
methods: {
receiveToSon (e) {
console.log(e)
}
}
}
</script>


子组件向父亲传递值 $emit

1. 子组件 通过this.$emit('事件名称',传递参数)
2. 在父子组件中 通过 在子组件身上 @事件名称 = 自定义的事件 来接收参数

<template>
<div>
<h1>Son 组件</h1>
<template>
<ul>
<li v-for="(item,index) of list" :key="index"> <h2>{{item.title}}</h2> <br><h3>{{item.author}}</h3></li>
</ul>
</template>
<Button @click="toParent">子向父 传递值</Button>
</div>
</template>

<script>
export default {
name: 'Son',
// 通过prop 来接收 父组件传递过来的数据
props: ['list'],
data () {
return {
name: '测试'
}
},
methods: {
toParent () {
// 子组件 通过 this.$emit(事件名,要传递的参数)
this.$emit('receiveToParent', this.name)
}
}
}
</script>




觉得不错的点赞,帮忙转发分享以下,原创不易!

收藏
评论区