15.Vue3.x中的Mixin实现组件功能的复用 、全局配置Mixin

本文主要是介绍15.Vue3.x中的Mixin实现组件功能的复用 、全局配置Mixin，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、Vue3.x中的mixin介绍使用

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

1. 新建mixin/baseMixin.js

   const baseMixin = {
       data() {
           return {
               apiUrl: "https://www.baidu.com",
           };
       },
       methods: {
           success() {
               console.log("我是公共混入对象，成功！");
           },
       },
   };
   export default baseMixin;
   

2. 在需要使用的组件中使用

   <template>
     <div>
       新闻组件---{{apiUrl}}
       <br>
       <button @click="success">点击</button>
     </div>
   </template>
   
   <script>
   import baseMixin from "@/mixin/baseMixin";
   export default {
     mixins: [baseMixin],
     data() {
       return {}
     }
   }
   </script>
   
   <style lang="scss" scoped>
     }
   </style>
   

二、关于Mixin的选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

1. 比如，数据对象在内部会进行递归合并，并在发生冲时以组件数据优先。

   <!--在Mixin中定义了msg数据-->
   const baseMixin = {
       data() {
           return {
               apiUrl: "https://www.baidu.com",
               msg: "baseMixin Msg",
           }
       },
       methods: {
           success() {
               console.log("我是公共混入对象，成功！");
           },
       },
   };
   export default baseMixin;
   

   组件使用时，组件内部也定义了msg数据

   此时，存在数据对象冲突，以组件数据优先

   同意，方法也是如此，相同方法以组件的优先

   <!--  -->
   <template>
     <div>
         首页模板--{{apiUrl}}
         <br>
         <br>
         <button @click="success">处罚</button>
   
       <h3>关于Mixin选项的合并</h3>
       {{msg}}
     </div>
   </template>
   
   <script>
   import baseMixin from "@/mixin/baseMixin";
   export default {
     data() {
       return {
         msg: "首页",
       };
     },
     methods:{
       success(){
         console.log("我是组件里面的success方法");
       }
     },
     mixins: [baseMixin],
   };
   </script>
   <style scoped>
   /* @import url(); 引入css类 */
   </style>
   

三、全局配置Mixin

还可以为Vue应用程序全局配置mixin

在项目入口文件中引入全局配置mixin

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from "@/mixin/baseMixin";

// createApp(App).mount('#app')

const app=createApp(App);
app.mixin(baseMixin);
app.mount("#app");

组件中不需要引入，和注册，直接使用mixin混入对象中的数据和方法

<template>
  <div>
    <!-- apiUrl为全局的mixin混入对象中的值-->
    新闻组件---{{apiUrl}}
    <br>
    <!-- success为全局的mixin混入对象中的方法-->
    <button @click="success">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
</style>

这篇关于15.Vue3.x中的Mixin实现组件功能的复用 、全局配置Mixin的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！