Vue进阶（九十四）：自定义组件

做前端项目开发，自定义组件是必不可少的一项基本技能，前端应用框架（像Vue、React、Angular）都提供一些已封装好、可复用的组件。但在实际项目开发过程中，根据具体的项目开发特点，肯定会遇到一些定制化的开发需求，此时，框架提供的通用组件就不再满足我们的需求了，就需要自己完成可复用组件的编码。

实现自定义组件编码的基本思路如下：

1. 思考这个组件需要实现什么效果；
2. 建立组件的模板，先把架子搭起来，完成组件的基本样式，大致效果是怎样的；
3. 实现的基本逻辑是怎样的；
4. 准备好组件的数据输入，即分析好逻辑，定好 props 里面的数据、类型；
5. 准备好组件的数据输出，即根据组件逻辑，做好要暴露出来的方法。
6. 注册、调用

掌握了自定义组件的以上基本思路，下面就是动手实践编写自定义组件了。

实现什么

实现一个select单选的组件，通过父组件传入待选项，select组件进行选择，先看一下demo的效果图。

代码详解

先说一下 props

通过Prop向子组件传递数据

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行.当然对 props 传递的参数应该添加一些验证规则；当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

Invalid prop: type check failed for prop "data". Expected Array, got String.

  
 

  
1
 

prop类型

String、Number、Boolean、Array、Object

prop类型检测

default、required、自定义验证

我们在父组件中需要将子组件需要的数据导入，用法如下：

<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

  
 

  
1
 

:searchList="searchList" 就是子组件需要显示的数据，这个可以写多个。这里我传输了2个参数过去，主要是做数据修改的说明。

在子组件中，我们的接收和使用方法如下：

props: { searchList: Array, selectValue: Object },
mounted() { this.data = this.searchList },

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

我们在 props 中接收数据，注意props对象里面 键值 是对该接收数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则将警告。

而props对象中的数据，我们可以直接在当前组件中使用 this.searchList直接使用。这里要强调一下，props传过来的数据只做展示，不得修改，想修改，再新写一个data中的变量承接做数据的再处理。

以上就是props传递过来的数据的使用了。

emit的使用(如何暴露组件方法)

我们已经会使用 父组件向子组件传数据了，那如子组件如何来修改父组件的数据呢？

这里提供 2 种实现方法，但是 第一种不推荐，强烈不推荐

方式一：

selectValue: {
  data: '1'
 }, ........................
this.selectValue.data = '我被修改了'

  
 

  
1
  
2
  
3
  
4
  
5
 

即，父组件将 对象 数据传递给子组件，子组件直接修改props过来的对象的值。

该方式可以实现子组件快速修改父组件的值，但是越权了！不推荐，这种方式写多了，容易出错，特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好，所以建议大家别这样写。

实现原理简单提一下： 这个对象、数组，是引用数据类型，就是存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。

方式二：

通过 $emit 方法去调用父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）

// 子组件
this.$emit('selectFunc', value)
// 父组件
<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

selectFunc(value) { this.selectValue2 = value console.log(this.selectValue) console.log(this.selectValue2) }

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

将父组件的方法注入子组件 @selectFunc="selectFunc" ，然后在子组件中通过 $emit 调用他，并传递参数。达到修改的目的。

demo代码

父组件：

<template> <section class="f-mainPage"> <!--selectFunc 选择完成的回调 searchList 下拉列表的数据--> <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search> </section>
</template>

<script type="text/ecmascript-6">
  import Search from '../vuePlugin/search'
  export default { data() { return { searchList: ['草船借箭', '大富翁', '测试数据'], // 直接通过props传递对象 修改，挺便捷的,但是不规范 selectValue: { data: '1' }, // 通过emit修改，规范写法 selectValue2: '' } }, mounted() {}, methods: { pageGo(path) { this.$router.push('/' + path) }, selectFunc(value) { this.selectValue2 = value console.log(this.selectValue) console.log(this.selectValue2) } }, components: { Search }
  }
</script>

  
 

  
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
 

子组件：

<template>
  <div v-for="item in data " v-on:click="choseValue(item)">{{item}}</div>
</template>

<script type="text/ecmascript-6">
  export default { data() { return { data: [] } }, props: { searchList: Array, selectValue: Object }, mounted() { this.data = this.searchList }, methods: { choseValue(value) { this.searchValue = value this.selectValue.data = '我被修改了' this.$emit('selectFunc', value) } }
  }
</script>

  
 

  
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
 

属性介绍

<template> 为HTML5发布后用来声明是“模板元素”的标签。即HTML5之前使用<script type ="text/template">方式声明，而HTML5之后可用<template> 标签。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/104051253