In the big front-end era of vue Angular React three front-end frameworks. Many opted for Vue, the star on Github, and Vue has outnumbered React. Star doesn’t mean vUE is better, but vUE is fast in terms of growth.

In the modular front-end era, everything is a component, vUE learning component is essential.

html
jq
vue

Today we in the simplest way, with vUE white children shoes, into the world of components ~

Let’s talk about three ways to use components today

  1. The basic components
  2. Global components
  3. Structural components

1. Basic components in four steps

  1. Write components (crap ~)
  2. Reference components in the page
  3. Declare components in components
  4. Use it on the page

Let’s take a button child as an example

Project SRC structure:

1. Write the subcomponents:

<template> <button class="btn" :style="{color:color}"> <slot/> <! -- socket --> </button> </template> <script> export default {// Pass the parameters to the props: {color: {type: String, // Color parameter type default: "#000" // default black}}} </script> <style scoped>. BTN {width: 110px; height: 60px; border-radius: 10px; border: none; font-size: 15px; } </style>Copy the code

2.3.4. Parent component:

<template> <div id="app"> <! <Button color="red"> </Button> </div> </template> <script> Import Button from '@/components/ button. vue' export default {name: "app", // 3. Declare component components in components: {Button}}; </script>Copy the code

Effect:

2. Five steps for global components

  1. Write components (or crap ~)
  2. Add the install method to the child component
  3. inmain.jsReferenced in the
  4. useVue.usemethods
  5. Use it on the page

1. The child component is still the same ~~ :

2. Add the install method for subcomponents

Button.js :

import ButtonComponent from './Button.vue'

// Add install method (plug-in method)
const Button = {
  install: function (Vue) {
    Vue.component("Button", ButtonComponent); }}/ / export Button
export default Button
Copy the code

Of course you can handle multiple global components:

import ButtonComponent1 from './Button1.vue'
import ButtonComponent2 from './Button2.vue'
import ButtonComponent3 from './Button3.vue'

const buttonList = [
    ButtonComponent1,
    ButtonComponent2,
    ButtonComponent3
];
// Add install method (plug-in method)
const Button = {
  install: function (Vue) {
    buttonList.forEach(button= >{
        // The name attribute of each component is used here as the component nameVue.component(button.name, button); }}})/ / export Button
export default Button
Copy the code

3.4. The main js

import Vue from 'vue'
import App from './App.vue'
/ / 3
import Button from '@/components/Button.js'
/ / 4
Vue.use(Button);
new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

5. Use it on the page

app.vue:

<template> <div id="app"> <! <Button color="blue"> </Button> </div> </template>Copy the code

The effect is as follows:

3. Construct the component in four steps

  1. Write components (also ** nonsense ~)
  2. vue.extendBuild a component
  3. mountVue.prototype
  4. Use in js

1. Write the subcomponents:

<template> <p class="Message">{{value}}</p> </template> <script> export default {data() {return {value: "I am a box"}; }}; </script> <style> .Message { position: fixed; bottom: 30px; width: 200px; Background: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 10px; left: 50%; transform: translateX(-50%); line-height: 30px; text-align: center; font-size: 15px; animation: messageFade 3s 1; Opacity: 0; opacity: 0; opacity: 0; -webkit-transform: translate3d(-50%, 80%, 0); transform: translate3d(-50%, 80%, 0); } 16% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 84% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-50%, 80%, 0); transform: translate3d(-50%, 80%, 0); } } </style>Copy the code

2. vue.extendBuild a component

Message.js :

import Vue from 'vue';
import Message from './Message.vue';
// Construct the component
const MessageConstructor = Vue.extend(Message);
// Set the component to be deleted
const removeDom = (target) = > {
    target.parentNode.removeChild(target);
};
// Construct the component to add the closing method
MessageConstructor.prototype.close = function() {
    this.visible = false;
    removeDom(this.$el);
};

const MessageDiv = (options) = > {
    // Instantiate the component
    const instance = new MessageConstructor({
        el: document.createElement('div'),
        // Component parameters applied to data within the component
        data: options,
    });
    // Add a component to the body
    document.body.appendChild(instance.$el);
    Vue.nextTick((a)= > {
        instance.timer = setTimeout((a)= > {
            // Close the component periodically
            instance.close();
        }, 3000);
    });
    return instance;
};

export default MessageDiv;
Copy the code

3. MountVue.prototype

main.js :

import Message from '@/components/Message.js'
Vue.prototype.$message = Message;
Copy the code

4. Use:

<template> <div id="app"> <Button color="blue" @click.native=" MSG "> </Button> </div> </template> <script> import Button from "@/components/Button.vue"; export default { name: "app", components: { Button }, methods: { msg() { // 4. $message({value:' I am a constructor '}); }}}; </script>Copy the code

Effect:

These are the basic uses of the three components