Vue2中组件详解

目录

说明

组件的命名规则

全局注册

一、应用场景

二、注册方法

三、注意事项

局部注册

一、应用场景

二、注册方法

三、注意事项

---

说明

组件是可复用的 Vue 实例，注册方式有局部注册和全局注册

组件的命名规则

说组件注册之前先讲一下，vue中组件名的命名规则

        使用 kebab-case（字母全部小写，单词之间用-连接）

        使用 PascalCase（大驼峰命名，单词首字母大写且单词之间无间隔）

        请使用有意义的组件名，代码规范人人有责（手动狗头）

全局注册

  一、应用场景

   一次引用，多次使用，无需重复引入

   在应用多处都有同样的使用场景

  二、注册方法

   1、 Vue.component('组件名', 组件)

    toast组件

        

    main.js中注册

import Vue from 'vue'
import App from './App'
import router from './router/routes';
import ToastVue from './components/Toast';

Vue.config.productionTip = false;

Vue.component("ToastVue",ToastVue)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

   其他页面或组件中使用

<template>
    <div>
        <ToastVue></ToastVue>
        <h2>欢迎页面</h2>
    </div>
</template>

  三、注意事项

    全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

局部注册

        未完待续

全局组件

 对于全局组件可以使用Vue.extend方法构造子类，并手动挂载使用，参数是一个包含   组件选项的对象

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})

 编写全局组件GlobleToast.vue

<template>
  <div id="toast" v-show="isVisible">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name:"GlobleToast",
  data () {
    return {
      isVisible:false,
      message:"",
      delay:2000
    }
  },
  watch:{
    isVisible:function(newVisible){
      // 当delay时间内有多个Toast实例，则移除上一个
      if(!newVisible){
        if(this.toastTimer) clearTimeout(this.toastTimer);
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      }
    }
  },
  mounted(){
    if(this.delay > 0){
      // delay 时间过后销毁组件
      this.toastTimer = setTimeout(()=>{
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },this.delay);
    }
  },
}
</script>

<style>
#toast{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 30px;
  min-width: 160px;
  max-width: 300px;
  text-align: center;
  padding: 6px 10px;
}
</style>

   编写全局组件构造函数GlobleToast.js

import Vue from "vue";
import GlobleToast from './GlobleToast.vue';
/**
 * 全局Toast组件
 * 多个Toat只显示最后一条
 * 默认显示时间为2S
 * @param message {String} 显示信息
 * @param delay {Number} 显示时间
 */


// 构造Toast组件
const ToastComponent = Vue.extend(GlobleToast);
let instance;
const Toast = function(message="",delay = 2000){
    // 防止加载多个实例
    if(instance){
        instance.isVisible = false;
    }
    // 实例化Toast组件，传入参数
    instance = new ToastComponent({
        data:{
            message,
            delay
        }
    });
    //手动挂载组件到指定元素上
    instance.$mount();
    document.body.appendChild(instance.$el);
    //更改组件状态为显示
    instance.isVisible = true;
};
export default GlobleToast;

添加GlobleToast到vue原型上，进行全局使用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import GlobleToast from './components/GlobleToast/GlobleToast.js';
import router from './router/routes';

Vue.config.productionTip = false;

//全局组件
Vue.prototype.$globleToast = GlobleToast;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

代码地址

github：

        稍后添加