Vue插件(Plugin)、动态组件(component)和混入(mixin)介绍

默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对。不建议使用全局注册混入对象，一旦使用全局混入，它将会影响以后创建的每一个vue实例。同名的钩子函数会被合并为一个数组，

叶子yes

3462人浏览 · 2022-09-28 18:49:11

叶子yes · 2022-09-28 18:49:11 发布

一、插件

插件通常用来为 Vue 添加全局功能。Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

通过全局方法 Vue.use() 使用插件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
	<div id="app">
    <!-- 使用插件中的过滤器 -->
    {{new Date().getTime() | fmtDate}}
    <!-- 使用插件中定义的自定义指令 -->
    <input type="text" v-focus>
  </div>
	<script>
    // 1.定义一个插件
    let myPlugin = {
      // 插件暴露一个install方法 参数：Vue构造函数 option可选项
      install(Vue,options){
        // 1.1 定义全局资源 Vue.xxx
        //定义一个 自定义指令
        Vue.directive('focus',{
          inserted(el){
            el.focus()
          }
        });
        //定义一个过滤器
        Vue.filter('fmtDate', function(val){
          return moment(val).format('YYYY-MM-DD')
        });
        //1.2 定义一个实例方法，定义在Vue的原型上 Vue.prototype.xxx
        Vue.prototype.message = function(val){
          console.log(val);
        }
      }
    }

    //2.使用插件
    Vue.use(myPlugin)
    
	new Vue({
		el:"#app",
		created(){
            // 插件中在Vue原型上定义了一个方法message，因此这里可以使用message方法
            this.message('请求成功！')
        }
	})
    </script>
</body>
</html>

二、动态组件

动态组件使用component标签，标签内使用v-bind绑定is属性动态切换组件：

<component :is="current"></component>

例子：
点击相应按钮切换相应组件：

<body>
	<div id="app">
    <button @click="current=myA">切换A组件</button>
    <button @click="current=myB">切换B组件</button>
    <component :is="current"></component>
  </div>
	<script>
    // 定义组件myA
    let myA = {
      template:`
        <div>我是A组件</div>
      `
    }
    // 定义组件myB
    let myB = {
      template:`
        <div>我是B组件</div>
      `
    }
	new Vue({
		el:"#app",
		// 注册组件
        components:{
            'my-a': myA,
            'my-b': myB
        },
        data:{
            current: myA
        }
	})
	</script>
</body>

keep-alive

默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<keep-alive>
   <component :is="current"></component> 
</keep-alive>

动态组件的生命周期

动态组件中新增了三个生命周期：

activated：进入激活组件

deactivated：离开停用

errorCaptured：子组件/后代组件发生错误捕获错误

触发顺序：

created-->errorCaptured-->mounted-->activated-->deactivated

<body>
	<div id="app">
    <button @click="current=myA">切换A组件</button>
    <button @click="current=myB">切换B组件</button>
    <keep-alive>
      <component :is="current"></component> 
    </keep-alive>
  </div>
	<script>
    // 定义一个A的子组件,用来说明errorCaptured声明周期
    let aChild={
			template:`
				<div>
					A组件的子组件
					{{subMsg}}
				</div>
			`
		};
    // 定义组件myA
    let myA = {
      template:`
        <div>我是A组件
          <a-child></a-child>
        </div>
      `,
      components:{
				'a-child': aChild
			},
      created(){
        alert('实例A初始化完成');
      },
      mounted(){
        alert('实例A挂载到页面完成')
      },
      // 激活组件 进入组件就会触发的生命周期
      activated() {
        alert('进入A组件了')
      },
      // 捕获子组件/后代组件发生错误的生命周期
	  errorCaptured(){
		alert('子组件发生错误了');
	  },
	  // 离开当前组件触发 停用组件
	  deactivated(){
		alert('离开A组件了');
	  },
    }
    // 定义组件myB
    let myB = {
      template:`
        <div>我是B组件</div>
      `
    }
	new Vue({
		el:"#app",
		// 注册组件
        components:{
            'my-a': myA,
            'my-b': myB
        },
        data:{
            current: myA
        }
	})
	</script>
</body>

三、混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

全局混入

Vue.mixin()

不建议使用全局注册混入对象，一旦使用全局混入，它将会影响以后创建的每一个vue实例。

局部混入

在组件实例中使用mixin配置项 mixins:[]

混入规则

当组件和混入对象有同名选项时，这些选项会以恰当的方式合并：

1、数据 data：

数据对象在混入时，会进行合并，发生冲突时，保留组件的数据

2、值为对象 methods、computed等：

在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对

3、生命周期钩子函数：

同名的钩子函数会被合并为一个数组，依次都会被调用，但是混入对象的钩子函数先被调用

<body>
	<div id="app">
    {{mixinMsg}}
	{{foo()}}
	{{bar()}}
  </div>
	<script>
    // 定义一个混入对象
    let myMixin = {
      data(){
        return{
          mixinMsg: '我是混入对象的数据',
          age: 18
        }
      },
      created(){
        console.log('我是混入的生命周期');
      },
      methods:{
        foo(){
          return this.age
        },
        bar(){
          console.log('我是混入方法');
        }
      },
    }
    // 全局混入——>混入到所有组件实例
    // Vue.mixin(myMixin);
	new Vue({
      // 局部混入
      mixins: [myMixin],
	  el:"#app",
      // 数据对象在混入时，会进行合并，发生冲突时，保留组件的数据
	  data:{
		msg: '我是vue实例的数据模型',
        age: 20
	  },
      // 生命周期会合并并依次调用执行 混入的生命周期优先执行
      created(){
		console.log('我是组件的生命周期');
		console.log(this.$data);
      },
      // 在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对
	  methods:{
        bar(){
          console.log('我是组件的方法');
        }
      }
	})
	</script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^