vue組件化開發(fā)指的是什么意思

class

定義子組件的類名

// 父組件


// 子組件
控制

//真實(shí)DOM
hello

style

向子組件傳遞樣式

// 父組件



// 子組件

其他屬性

$attrs

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

v-once

組件只渲染一次，后面即使數(shù)據(jù)發(fā)生變化也不會重新渲染，比如例子中val不會變成456

mixins

// 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]
}

實(shí)例演示

比如我們要注冊一個(gè) lx-button 這樣一個(gè)組件，那么目錄和偽代碼如下：

index.vue

index.js

import lxButton from './src/index'

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

export default lxButton

其中 install 是 Vue.js 提供了一個(gè)公開方法，這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對象。
MyPlugin.install = function (Vue, options){}

參考： 開發(fā)插件

https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

watch-彈窗實(shí)現(xiàn)原理

顯示

定義組件

點(diǎn)擊父組件中的顯示按鈕，改變傳入子組件中的值，點(diǎn)擊子組件中的關(guān)閉，改變父組件中值。

注：@click=“dialogVisible = true” 點(diǎn)擊時(shí)將dialogVisible的值改為true  
注：:visible.sync: 雙向數(shù)據(jù)綁定，配合update:visible使用，實(shí)現(xiàn)子組件修改父組件中的值

官網(wǎng)解釋： sync

col組件實(shí)例

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);
  }
};

col組件使用render函數(shù)，而不是template來實(shí)現(xiàn)組件，原因有兩個(gè)：

• 該組件有大量的類判斷，如果采用template代碼比較冗余，使用js代碼更加簡潔

• 直接render描述性能更好

官網(wǎng)解釋： render-function

button組件實(shí)例

局部組件實(shí)例

看完了這篇文章，相信你對“vue組件化開發(fā)指的是什么意思”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！