vue組件化開發是什麼意思-前端問答-PHP中文網

Vue 元件化開發

1. 全域註冊

2. 局部註冊

元件化開發必備知識

实例演示

首頁

web前端

前端問答

vue組件化開發是什麼意思

青灯夜游

Dec 27, 2021 pm 04:15 PM

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(&#39;my-component&#39;, {
  // 选项
})

登入後複製

2. 局部註冊

Vue.js 也同樣支援局部註冊，我們可以在一個元件內部使用components 選項做元件的局部註冊，例如：

import HelloWorld from &#39;./components/HelloWorld&#39;

export default {
  components: {
    HelloWorld
  }
}

登入後複製

區別：全域元件是掛載在Vue.options.components 下，而局部元件是掛載在vm.$options.components 下，這也是全域註冊的元件能被任意使用的原因。

元件化開發必備知識

所謂工欲善其事，必先利其器，在正式開發一個元件之前，我們先要掌握一些必備的知識，這裡我只會簡單介紹一下，詳情參考官網。

name

元件的名稱，在必填

<lx-niu/>
<lx-niu></lx-niu/>

name: &#39;lxNiu&#39;

登入後複製

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

props

元件屬性，用於父子元件通信，可透過this.msg存取

<div>{{msg}}</div>

props: {
  msg: {
    type: String,
    default: &#39;&#39;
  }
}

show: Boolean // 默认false

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

登入後複製

computed

處理data或props中的屬性，並傳回一個新屬性

<div>{{newMsg}}</div>

computed: {
  newMsg() {
    return &#39;hello &#39; + this.msg
  }
},

登入後複製

註：因為props，data和computed在編譯階段都會作為vm的屬性合併，所以不可重名

render

用render函數描述template

<lx-niu tag=&#39;button&#39;>hello world</lx-niu>

<script type="text/javascript">
  export default {
    name: &#39;lxNiu&#39;,
    props: {
      tag: {
        type: String,
        default: &#39;div&#39;
      },
    },
    // h: createElement
    render(h) {
      return h(this.tag,
        {class: &#39;demo&#39;}, 
        this.$slots.default)
    }
  }
</script>

登入後複製

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組件化開發是什麼意思

<lx-niu>
  <div slot=&#39;header&#39;>header</div>
  <div class="body" slot=&#39;body&#39;>
    <input type="text">
  </div>
  <div slot=&#39;footer&#39;>footer</div>

  <button class=&#39;btn&#39;>button</button>
</lx-niu>

<template>
  <div>
    <slot name=&#39;header&#39;></slot>
    <slot name=&#39;body&#39;></slot>
    <slot name=&#39;footer&#39;></slot>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: &#39;lxNiu&#39;,
    mounted() {
      this.$slots.header // 包含了slot="foo"的内容
      this.$slots.default // 得到一个vnode，没有被包含在具名插槽中的节点，这里是button
    }
  }
</script>

登入後複製

class

定義子元件的類別名稱

// 父组件
<lx-niu round type=&#39;big&#39;/>

// 子组件
<div :class="[
  type ? &#39;lx-niu__&#39; + type : &#39;&#39;,
  {&#39;is-round&#39;: round},
]">控制</div>

//真实DOM
<div class=&#39;lx-niu__big is-round&#39;>hello</div>

登入後複製

#style

向子元件傳遞樣式

// 父组件
<lx-niu :bodyStyle=&#39;{color: "red"}&#39;/>


// 子组件
<template>
  <div :style=&#39;bodyStyle&#39;>hello world</div>
</template>

<script>
  export default {
    name: &#39;lxNiu&#39;,
    props: {
      bodyStyle: {},
    },
  }
</script>

登入後複製

其他屬性

$attrs

v-bind="$attrs" 將除class和style外的屬性加入到父元件上，如定義input：

<input v-bind="$attrs">

登入後複製

v-once

元件只渲染一次，後面即使資料變更也不會重新渲染，例如例子中val不會變成456

<template>
  <div>
    <button @click="show = !show">button</button>
    <button @click="val = &#39;456&#39;">button</button>
    <div v-once v-if="show">
      <span>{{val}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      show: false,
      val: &#39;123&#39;
    }
  },
};
</script>

登入後複製

mixins

// mixin.js
export default {
  data() {
    return{
       msg: &#39;hello world&#39;
    }
  },
  methods: {
    clickBtn() {
      console.log(this.msg)
    }
  },
}

// index.vue
<button @click="clickBtn">button</button>

import actionMixin from "./mixin.js";
export default {
  methods: {},
  mixins: [actionMixin]
}

登入後複製

实例演示

比如我们要注册一个 lx-button 这样一个组件，那么目录和伪代码如下：

vue組件化開發是什麼意思

index.vue

<template>
  <button>lxButton</button>
</template>

<script>
export default {
  name: &#39;lxButton&#39;
}
</script>

登入後複製

index.js

import lxButton from &#39;./src/index&#39;

lxButton.install = (Vue) => {
  Vue.component(lxButton.name, lxButton)
}

export default lxButton

登入後複製

其中 install 是 Vue.js 提供了一个公开方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
MyPlugin.install = function (Vue, options){}

参考：开发插件
https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

watch-弹窗实现原理

<button @click="dialogVisible = true">显示</button>
<lx-niu :visible.sync="dialogVisible"></lx-niu>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      }
    },
    watch: {
      dialogVisible(val) {
        console.log(&#39;father change&#39;, val)
      }
    }
  }
</script>

登入後複製

定义组件

<template>
  <div v-show="visible">
    <button @click="hide">关闭</button>
  </div>
</template>

<script>
  export default {
    name: &#39;lxNiu&#39;,
    props: {
      visible: Boolean
    },
    watch: {
      visible(val) {
        console.log(&#39;child change:&#39;, val)
      }
    },
    methods: {
      hide() {
        this.$emit(&#39;update:visible&#39;, false);
      }
    },
  }
</script>

登入後複製

点击父组件中的显示按钮，改变传入子组件中的值，点击子组件中的关闭，改变父组件中值。

注：@click=“dialogVisible = true” 点击时将dialogVisible的值改为true
注：:visible.sync: 双向数据绑定，配合update:visible使用，实现子组件修改父组件中的值

官网解释： sync

col组件实例

export default {
  name: &#39;ElCol&#39;,

  props: {
    span: {
      type: Number,
      default: 24
    },
    tag: {
      type: String,
      default: &#39;div&#39;
    },
    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 !== &#39;ElRow&#39;) {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }
  },
  render(h) {
    let classList = [];
    let style = {};

    if (this.gutter) {
      style.paddingLeft = this.gutter / 2 + &#39;px&#39;;
      style.paddingRight = style.paddingLeft;
    }

    [&#39;span&#39;, &#39;offset&#39;, &#39;pull&#39;, &#39;push&#39;].forEach(prop => {
      if (this[prop] || this[prop] === 0) {
        classList.push(
          prop !== &#39;span&#39;
            ? `el-col-${prop}-${this[prop]}`
            : `el-col-${this[prop]}`
        );
      }
    });

    [&#39;xs&#39;, &#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;, &#39;xl&#39;].forEach(size => {
      if (typeof this[size] === &#39;number&#39;) {
        classList.push(`el-col-${size}-${this[size]}`);
      } else if (typeof this[size] === &#39;object&#39;) {
        let props = this[size];
        Object.keys(props).forEach(prop => {
          classList.push(
            prop !== &#39;span&#39;
              ? `el-col-${size}-${prop}-${props[prop]}`
              : `el-col-${size}-${props[prop]}`
          );
        });
      }
    });

    return h(this.tag, {
      class: [&#39;el-col&#39;, classList],
      style
    }, this.$slots.default);
  }
};

登入後複製

col组件使用render函数，而不是template来实现组件，原因有两个：

该组件有大量的类判断，如果采用template代码比较冗余，使用js代码更加简洁
直接render描述性能更好

官网解释： render-function

button组件实例

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? &#39;el-button--&#39; + type : &#39;&#39;,
      buttonSize ? &#39;el-button--&#39; + buttonSize : &#39;&#39;,
      {
        &#39;is-disabled&#39;: buttonDisabled,
        &#39;is-loading&#39;: loading,
        &#39;is-plain&#39;: plain,
        &#39;is-round&#39;: round,
        &#39;is-circle&#39;: circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: &#39;ElButton&#39;,

    inject: {
      elForm: {
        default: &#39;&#39;
      },
      elFormItem: {
        default: &#39;&#39;
      }
    },

    props: {
      type: {
        type: String,
        default: &#39;default&#39;
      },
      size: String,
      icon: {
        type: String,
        default: &#39;&#39;
      },
      nativeType: {
        type: String,
        default: &#39;button&#39;
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },

    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },

    methods: {
      handleClick(evt) {
        this.$emit(&#39;click&#39;, evt);
      }
    }
  };
</script>

登入後複製

局部组件实例

<template>
  <div class="login">
    <login-header />
    <login-request />
    <login-footer />
  </div>
</template>

<script>
import loginHeader from &#39;./login-header&#39;;
import loginRequest from &#39;./login-request&#39;;
import loginFooter from &#39;./login-footer&#39;;

export default {
  components: {
    [loginHeader.name]: loginHeader,
    [loginRequest.name]: loginRequest,
    [loginFooter.name]: loginFooter
  }
};
</script>

登入後複製

8. 分享总结