vue组件化开发指的是什么意思

小编给大家分享一下vue组件化开发指的是什么意思，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

建网站原本是网站策划师、网络程序员、网页设计师等，应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联建站专业提供成都网站设计、成都网站制作、外贸网站建设,网页设计,网站制作(企业站、自适应网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

在vue中，组件化开发指的是将复杂的业务拆分为多个组件，每个组件依赖的CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，且可以极大简化代码量，对后期的需求变更和维护也更加友好。

vue组件化开发指的是什么意思

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

Vue 组件化开发

什么叫做组件化

vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

1、组件化开发指的是将复杂的业务拆分为一个又一个的组件

2、组件化开发的组件一般来说要灵活

3、组件化开发涉及到了Vue的js组件封装，需要掌握Vue基础、Vue实例方法与属性、Vue.extend、Vue插件等知识

vue组件化开发指的是什么意思

如何进行组件化开发

先看下图：

vue组件化开发指的是什么意思

这是 vue.js 中的一个报错，原因是使用了一个未经注册的组件 lx-xxx ，这个报错告诉我们一个道理：使用自定义组件之前必须注册。
那么如何注册一个组件呢？ Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。

1. 全局注册

在 vue.js 中我们可以使用 Vue.component(tagName, options) 进行全局注册，例如

Vue.component('my-component', {
  // 选项
})

2. 局部注册

Vue.js 也同样支持局部注册，我们可以在一个组件内部使用 components 选项做组件的局部注册，例如：

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

区别：全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。

组件化开发必备知识

所谓工欲善其事，必先利其器，在正式开发一个组件之前，我们先要掌握一些必备的知识，这里我只会简单介绍一下，详情参考官网。

name

组件的名称，必填




name: 'lxNiu'

js 中使用驼峰式命令，HTML 使用kebab-case命名。

props

组件属性，用于父子组件通信，可通过this.msg访问

{{msg}}

props: {
  msg: {
    type: String,
    default: ''
  }
}

show: Boolean // 默认false

msg: [String, Boolean]  // 多种类型

computed

处理data或者props中的属性，并返回一个新属性

{{newMsg}}

computed: {
  newMsg() {
    return 'hello ' + this.msg
  }
},

注：因为props，data和computed在编译阶段都会作为vm的属性合并，所以不可重名

render

用render函数描述template

hello world


  export default {
    name: 'lxNiu',
    props: {
      tag: {
        type: String,
        default: 'div'
      },
    },
    // h: createElement
    render(h) {
      return h(this.tag,
        {class: 'demo'}, 
        this.$slots.default)
    }
  }

render 中的 h 其实就是 createElement，它接受三个参数，返回一个 vnode
h 参数解释：
args1: {string | Function | Object} 用于提供DOM的html内容
args2: {Object} 设置DOM样式、属性、绑定事件之类
args3: {array} 用于设置分发的内容

注：vue编译顺序： template–> compile --> render --> vnode --> patch --> DOM

slot

vue组件化开发指的是什么意思


  header

footer

// 父组件 // 子组件

// mixin.js export default { data() { return{ msg: 'hello world' } }, methods: { clickBtn() { console.log(this.msg) } }, } // index.vue button import actionMixin from "./mixin.js"; export default { methods: {}, mixins: [actionMixin] }

显示

export default { name: 'ElCol', props: { span: { type: Number, default: 24 }, tag: { type: String, default: 'div' }, offset: Number, pull: Number, push: Number, xs: [Number, Object], sm: [Number, Object], md: [Number, Object], lg: [Number, Object], xl: [Number, Object] }, computed: { gutter() { let parent = this.$parent; while (parent && parent.$options.componentName !== 'ElRow') { parent = parent.$parent; } return parent ? parent.gutter : 0; } }, render(h) { let classList = []; let style = {}; if (this.gutter) { style.paddingLeft = this.gutter / 2 + 'px'; style.paddingRight = style.paddingLeft; } ['span', 'offset', 'pull', 'push'].forEach(prop => { if (this[prop] || this[prop] === 0) { classList.push( prop !== 'span' ? `el-col-${prop}-${this[prop]}` : `el-col-${this[prop]}` ); } }); ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => { if (typeof this[size] === 'number') { classList.push(`el-col-${size}-${this[size]}`); } else if (typeof this[size] === 'object') { let props = this[size]; Object.keys(props).forEach(prop => { classList.push( prop !== 'span' ? `el-col-${size}-${prop}-${props[prop]}` : `el-col-${size}-${props[prop]}` ); }); } }); return h(this.tag, { class: ['el-col', classList], style }, this.$slots.default); } };

vue组件化开发指的是什么意思

Vue 组件化开发

1. 全局注册

2. 局部注册

组件化开发必备知识

实例演示

其他资讯