首页 > 其他分享 >Mixins混入

Mixins混入

时间:2022-11-12 09:35:38浏览次数:38  
标签:混入 log created Mixins mixins MixinsFn js

代码复用的一个属性,一般都是在复用生命周期函数

在src下创建 mixins 文件夹/index.js js文件,写入:

export const MixinsFn = {
   //混入对象中可以像正常对象一样拥有值与函数
   data(){
       return {
      msg:"您好"
}
  }
   methods: {
       fn() {console.log("这是fn");}
  }
   //亦或是生命函数也可以使用
   created() { console.log("这是mixins触发的created"),}
  }

引用mixins

<script>
//导出了混入对象后就需要在组件中引入
import { MixinsFn } from '@/mixins/index.js'  
export default {
 created(){
   console.log("这是此页面触发的created")
},
 //调用混入对象  
 mixins: [MixinsFn]
 this.fn(); //调用mixins中的方法
}
</script>

我们会发现,mixins中的created 比 引入页面中的created 优先执行。

 

标签:混入,log,created,Mixins,mixins,MixinsFn,js
From: https://www.cnblogs.com/Dollom/p/16882698.html

相关文章

  • 【Vue2.0学习】—mixin混入(五十五)
    【Vue2.0学习】—mixin混入(五十五)//该文件是整个项目的入口文件//引入VueimportVuefrom'vue'//引入APP组件,它是所有组件的父组件importAppfrom'./App.vue'//全局引入i......
  • Vue3使用可重复使用的Mixins
     这里有两个子页面是重复功能的,一个是点击事件,一个是鼠标移入事件点击事件  鼠标移入事件  效果      现在使用mixins新键一个文件夹minxs,再......
  • Vue2 mixins混入
    概述在Vue中我们的很多组件的配置都会有共用的数据,方法,钩子等等,我们可以把这些共用的部分提取到一个js文件中,并导入到需要使用的组件中,通过mixins配置项进行使用。......
  • vue3 ts 类式写法的mixins
    vue-property-decorator混入(mixins)//mixins.tsimport{Vue}from'vue-property-decorator'classMixinsextendsVue{publicname='混入'publicsay......
  • JavaScript 中的混入
    JavaScript中的混入Photoby阿列克谢·鲁班on不飞溅介绍在继承中,大多数编程语言不支持多级继承,这意味着您不能为特定类拥有多个父级。Javascript也不支持多级......
  • behaviors 类似 mixins
        ......
  • maxin混入
      1.把共同的提取出来,放到混合js里面并暴露出去。↑ 2.注册↑  3.使用↑ ......
  • vue——minix混入
    1.功能:可以把多个组件共用的配置提取成一个混入对象2.使用方式:第一步定义混合:mixin.js第二步使用混入:全局混入:main.js中局部混入:   总......
  • VUE学习-mixin混入
    mixin混入混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。组件式混入//定义一个混入对象varmyMixin={ created:function(){this.hel......