Vue 封装自定义组件,加案例!

封装自己的组件

在日常开发中,我们在Vue经常使用框架ui的插件,十分便利.但是我们要怎么封装自己定义的组件呢?

步骤

在main.js里面使用下面代码 创建一个自定义组件,关键字install

// 自定义插件 
const myplugin = {  //是一个对象
install: function (Vue) {
  // 做任何东西
  console.log(Vue);
}
}
// 使用插件
Vue.use(myplugin)

下面是属于扩展,利用自定义插件,和混入mixin,创建一个表单验证

入口文件 app.vue

<template>
<div id="app">
  用户名<input type="text" v-model="name" />
  <div>验证结果:{{ validate }}</div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
name: "app",

data() {
  return {
    foo: 10,
    name: "哈哈哈hhh",
    validate: "", //验证结果
  };
},
reles: {
  foo: {
    validate: (value) => value > 1, //相等于  function(value){return value > 1}
    message: "变量必须大于1",
  },
  name: {
    validate: (value) => value.length > 6, //相等于  function(value){return value !== ""}
    message: "name属性大于6个字符",
  },
},
};
</script>

main.js写入

//main.js 插件形式封装一个全局混入
// 自定义插件 
const myplugin = {  //是一个对象
install: function (Vue) {
  // 做任何东西
  // console.log(Vue);
  Vue.mixin({  //创建一个全局的混入
    created() {
      console.log(this.$options);
      if (this.$options.reles) {   //$option 是用来获取data外面的数据和方法
        // 先判断全部页面有没有这个规则
        for (let key in this.$options.reles) {
          // 获取每一个值
          const rule = this.$options.reles[key]
          // 在监听值的变化
          this.$watch(key, newValue => {   //name  //新值
            // 验证结果
            console.log(key);
            const reuslt = rule.validate(newValue)  //结果是一个布尔值
            if (!reuslt) {
              this.validate = rule.message
            } else {
              this.validate = ""
            }
          })
        }
      }
    }
  })
}
}

效果