What does vue component development mean?

In Vue, component development refers to splitting complex business into multiple components, and the CSS, JS, templates, pictures and other resources that each component depends on are developed and maintained together. Because components are independent of resources, they can be reused within the system, greatly simplifying the amount of code, and are more friendly to later demand changes and maintenance.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue component development

What is componentization

vue.js has two major One magic weapon is data-driven and the other is componentization. So the question is, what is componentization and why is it necessary? Next, I will answer these two questions one by one. The so-called componentization is to split the page into multiple components, and the CSS, JS, templates, pictures and other resources that each component depends on are developed and maintained together. . Because components are independent of resources, they can be reused within the system, and components can be nested. If the project is complex, the amount of code can be greatly simplified, and later demand changes and maintenance will be easier. friendly.

1. Component-based development refers to splitting complex business into components one after another

2. Components developed through component-based development generally need to be flexible

3. Component development involves Vue’s js component encapsulation, and you need to master the basics of Vue, Vue instance methods and properties, Vue.extend, Vue plug-ins, etc.

How to carry out component development

First look at the picture below:

This is an error in vue.js. The reason is that an unregistered component lx-xxx is used. This error tells us a truth: You must register before using a custom component.
So how to register a component? Vue.js provides two ways to register components, global registration and local registration.

1. Global registration

In vue.js we can use Vue.component(tagName, options) for global registration, such as

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

2. Partial registration

Vue.js also supports partial registration. We can use the components option inside a component to do partial registration of the component, for example:

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

Difference : Global components are mounted under Vue.options.components, while local components are mounted under vm.$options.components, which are also globally registered components. can be used arbitrarily.

Essential knowledge for component development

It is said that if you want to do your job well, you must first sharpen your tools. Before formally developing a component, we must first To master some necessary knowledge, I will only briefly introduce it here. Please refer to the official website for details.

name

The name of the component, required

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

name: &#39;lxNiu&#39;

Use camel case commands in js, kebab-case for HTML name.

props

Component properties, used for parent-child component communication, can be accessed through this.msg

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

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

show: Boolean // 默认false

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

computed

Process the attributes in data or props and return a new attribute

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

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

Note: Because props, data and computed will be used as vm during the compilation phase The attributes are merged, so the name cannot be repeated

render

Use the render function to describe the h in 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 In fact It is createElement, which accepts three parameters and returns a vnode
h Parameter explanation:
args1: {string | Function | Object} is used to provide the html content of the DOM
args2: {Object} sets the DOM style, Properties, binding events, etc.
args3: {array} is used to set the distributed content

Note: vue compilation sequence: template–> compile --> render --> vnode -- > patch --> DOM

slot

##

<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

Define the class name of the subcomponent

// 父组件
<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

Transfer style to the subcomponent

// 父组件
<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>

Other attributes

$attrs

v-bind="$attrs" will be removed Attributes outside class and style are added to the parent component, such as defining input:

<input v-bind="$attrs">

v-once

The component is only rendered once, even if the data changes later. It will be re-rendered. For example, in the example, val will not become 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: 'hello world'
    }
  },
  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 这样一个组件，那么目录和伪代码如下：

index.vue

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

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

index.js

import lxButton from './src/index'

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: '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函数，而不是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. 分享总结

• 首先介绍了什么是组件化开发，以及为什么要进行组件化
• 其次介绍了组件开发的两种方式和适用场景，以及进行组件化开发的必备知识
• 最后实例演示了全局组件和局部组件的开发

【相关推荐：《vue.js教程》】

The above is the detailed content of What does vue component development mean?. For more information, please follow other related articles on the PHP Chinese website!