2020前端技术面试必备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>

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

（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>  
  

PHP7-1：从0开始入门学习

PHP7-2: 面向对象开发

MYSQL常用操作指令

ES6_11_Module 的语法(import, export,export default )

ES6_08_Promise

Android 基础入门干货分享 (UI控件篇)

ES6系列文章已经在公众号更新完

扫码关注，获取更多资料

关注公众号，即可加入自学交流群学习

             原创不易 觉得不错的话点一下在看😝