vue组件封装指南__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

vue组件三要素

props参数

slot定制插槽

event自定义事件

基本用法

在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 template 中写好 HTML 代码，一个简单的组件就完成了一个完整的组件，除了 template 以外，还有 script和 style

<template>
  <div class="headComponent">
    子组件{{{myData}}
  </div>
</template>

<script>
export default {
    props:['data','type'],
    inheritAttrs: false,
    data(){
        return{
            myData:'',
        }
    },
    mounted(){

    },
    methods:{
       
    }
}
</script>
<style scoped>

</style>

然后在其他文件的 js 里面引入并注册，就能直接使用这个组件了

import list from '../components/headComponent.vue'

一、props:数据父组件传入子组件

父对子传参，就需要用到 props，通常的 props 是这样的：

props:['data','type']

但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则,常用格式如下：

 props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    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 value > 10
      }
    }
  }

对于通过 props 传入的参数，不建议对其进行操作，因为会同时修改父组件里面的数据 // vue2.5已经针对 props 做出优化，这个问题已经不存在了如果一定需要有这样的操作，可以这么写：

let copyData = JSON.parse(JSON.stringify(this.data))

为什么不直接写 let myData = this.data 呢？因为直接赋值，对于对象和数组而言只是浅拷贝，指向的是同一个内存地址，其中一个改变另一个也会改变。而通过 JSON颠倒转换之后，实现了深拷贝，则可以互不影响。

二、子组件触发父组件事件

在通用组件中，通常会需要有各种事件，比如复选框的 change 事件，或者组件中某个按钮的 click 事件，有时子组件需要触发一个事件，并传递给父组件

// 子组件方法：触发父组件方法，并传递参数data到父组件
handleSubmit(data){
    this.$emit('submitToParent', data)
}


// 父组件调用子组件
<child-component @submitToParent="parentSubmit"></child-component>
... ...
// 父组件中被触发的方法，接受到子组件传来的参数
parentSubmit(data){
    // 父组件的逻辑处理
}

父组件中的逻辑要放在父组件处理，子组件基于父组件的数据做的逻辑放在子组件中处理；这样既降低了耦合性，也保证了各自的数据不被污染。

三、记得留一个 slot

一个通用组件，往往不能够完美的适应所有应用场景所以在封装组件的时候，只需要完成组件 80% 的功能，剩下的 20% 让父组件通过 solt 解决

上面是一个通用组件，在某些场景中，右侧的按钮是 “处理” 和 “委托”。在另外的场景中，按钮需要换成 “查看” 或者 “删除” 在封装组件的时候，就不用写按钮，只需要在合适的位置留一个 slot，将按钮的位置留出来，然后在父组件写入按钮

子组件
<div class="child-btn">
    <!-- 具名插槽 -->
    <slot name="button"></slot>
    <!-- 匿名插槽（每个组件只能有一个） -->
    <slot><slot>
</div>

父组件
<child>
    <!-- 对应子组件中button的插槽 -->
    <button slot="button">slot按钮</button>
</child>

开发通用组件的时候，只要不是独立性很高的组件，建议都留一个 slot，即使还没想好用来干什么。

再来个例子：

开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件内部留一个或者多个插口

然后在调用这个子组件的时候加入内容

添加的内容就会分发到对应的 slot 中

slot 中还可以作为一个作用域，在子组件中定义变量，然后在父组件中自定义渲染的方式子组件：

父组件：

这个示例中，首先在子组件中添加 slot，并在子组件中定义了数组变量 navs 然后在父组件中以作用域 template 添加内容，其中 scope 是固有属性，它的值对应一个临时变量 props 而 props 将接收从父组件传递给子组件的参数 navs

关于slot的用法还可查看：https://juejin.im/post/6844904185922600968

四、Vuex：巧用但不要滥用

子组件向子组件传递数据

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。父子组件之间是通过 props 和自定义事件来传参，非父子组件通常会采用 Vuex 传参 Vuex设计初衷是用来管理组件状态，也可以用于复杂组件的参数传递

但是 Vuex 的虽然可以用来传参，但并不推荐;因为 Vuex 类似于一个全局变量，会一直占用内存在写入数据庞大的 state 的时候，就会产生内存泄露(人是活的，不能因为事物有弊端就不使用，合理利用即可)。 Tips: 当页面刷新的时候，Vuex 会初始化，同时也会丢失编辑过的数据如果刷新页面时需要保留数据，可以通过 url 或者 sessionstorage 保存 id，然后 ajax 请求数据

五、组件的css:合理运用 scoped 控制样式作用域

在编写组件的时候，可以在 style 标签中添加 scoped，让标签中的样式只对当前组件生效但是一味的使用 scoped，肯定会产生大量的重复代码所以在开发的时候，应该避免在组件中写样式当全局样式写好之后，再针对每个组件，通过 scoped 属性添加组件样式

六、动态组件

Vue 还可以将多个子组件，都挂载在同一个位置，通过变量来切换组件，实现 tab 菜单这样的效果

这样的功能可以通过路由 vue-router 实现，但路由更适合较大的组件，而且 url 会有相应的改变 Vue 自身保留的元素，可以将组件动态绑定到 is 特性上，从而很方便的实现动态组件切换

上例中，当 tabView 的值改变，component 就会渲染对应的组件，和路由的效果十分类似，但是地址栏并没有发生改变，但这样一来，每次切换组件都会重新渲染，无法保留组件上的数据。这时可以使用 ** keep-alive ** 将组件保留在内存中，避免重新渲染

七、递归组件

当组件拥有 name 属性的时候，就可以在它的模板内递归的调用自己，这在开发树形组件的时候十分有效

上面是一个子组件，定义了 name 为 simple03，然后在模板中调用自身，结合 v-for 实现递归为了防止出现死循环，在调用自身的时候，加入了 v-if 作为判定条件父组件中调用的时候，需要通过 props 传入一个 tree：

最终渲染结果：

其他情况

子组件改变父组件的数据

在vue2.0之后的版本中，不允许子组件直接改变父组件的数据，在1.0的版本中可以这样操作的，但是往往项目需求需要改变父组件的数据，那我们如何变通呢？当我们把父元素的数据给子组件时，要传一个非基础类型，即传递对象or数组，子组件通过访问对象中的属性操作数据，因为对象和数组是传引用，所以在子组件中修改的时候，父组件也会同步改变，如下：

// 父组件要props传递给子组件的数据
myData:{
    info:'父组件信息'
}

// 子组件
 <template id="tpl">
    <div>
        <button @click="change">change</button>
        <p>{{data.info}}</p>
    </div>
</template>
... 省略部分无关代码 ...
props:['data'],
methods:{
    change(){
        this.data.info = 'change info'
    }
}

当子组件点击change按钮改变数据的时候，父组件也会同步改变

如果不想影响父组件的值，我们也可以用文章开头讲的JSON颠倒转换的方式，在mounted方法中进行深拷贝，在data中初始化数据时用另一个变量作为承载，这样才承载变量改变，就不会影响父组件该变量的值了。

参考博客： http://www.cnblogs.com/wisewrong/p/6834270.html https://www.cnblogs.com/yesyes/p/6629448.html

目录