首页 > 其他分享 >Vue2 mixins混入

Vue2 mixins混入

时间:2022-10-03 13:34:00浏览次数:54  
标签:混入 Vue2 mixins mixin2 js export mixin 组件

概述

在 Vue 中我们的很多组件的配置都会有共用的数据,方法,钩子等等,我们可以把这些共用的部分提取到一个 js 文件中,并导入到需要使用的组件中,通过 mixins 配置项进行使用。

我们需要创建一个 js 文件,名字随意,这里我们叫做 mixin.js

export const mixin {
    
}

之后在需要这个混入的组件中导入。

然后通过 mixins 配置项进行配置。

使用

minxi.js

export const mixin = {
	data() {
		return {
			name: "mixin",
			age: "now"
		}
	},
	methods: {
		showName() {
			alert(this.name)
		}
	}
}

export const mixin2 = {
	mounted(){
		console.log("this is mixin2");
	}
}

TestMixins.vue

<template>
	<div>
		<p>{{name}}</p>
		<p>{{age}}</p>
		<button @click="showName">mixin</button>
	</div>
</template>

<script>
	import {
		mixin,
		mixin2
	} from '../mixin.js'

	export default {
		data() {
			return {
				name: "brokyz"
			}
		},
		mixins: [mixin, mixin2]
	}
</script>
  • 如果 mixin.js 中的配置与需要配置 mixins 的组件重合时,将以组件里面的配置为主。也就是说组件和 mixin 相同的未知,组件会将其覆盖。
  • 在使用声明周期函数时,minxi 和 组件都设置了相同的钩子时, 两个都会调用,而且 mixin 中的会优先执行。

标签:混入,Vue2,mixins,mixin2,js,export,mixin,组件
From: https://www.cnblogs.com/brokyz/p/16750396.html

相关文章

  • Vue2 插件
    概述Vue的插件就是一个js文件,里面允许我们完成一些特定的功能。使用创建一个插件plugins.jsexportdefault{install(Vue){//全局过滤器Vue.filt......
  • Vue2 动画与过渡
    概述Vue为我们优化了CSS动画在Vue中的使用,帮助我们在使用动画的时候更加的得心应手。使用CSS动画完成Vue动画<template><divid="app"><button@cli......
  • Vue2 指令操作
    概述指令是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue中的指令按照不同的用途可分为如下6大类:内容渲染指令。属性绑定指令。事件绑定指......
  • Vue2 计算属性
    概述计算属性指的是通过一系列运算之后,最终得到一个属性值。间的的理解,当我们拥有一些数据时,我们需要将这些数据整合到一起,这时候计算属性就会完成这个操作,整合到一起的......
  • Vue2 props
    props概述我们的组件进行展示数据时,里面并不是都是写死的。我们需要在使用组件时,向组件内部传值,并展现我们需要的值。数组形式接收propsTestProps.vue<template> ......
  • 面试官:vue2和vue3的区别有哪些?
    一、Vue3与Vue2区别详述1.生命周期对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上+“on”,功能上是类似的。不过有一点需要注意,Vue3在组合式API(Compo......
  • 【尚硅谷】Vue2.x组件化编码学习笔记--渐进式的JS框架
    Vue组件化编码​​一、使用Vue-cli创建项目​​​​1.1说明​​​​1.2创建Vue项目​​​​1.2.1如何修改端口以及自动运行​​​​1.3Vue-cli创建的项目的目录结构​​......
  • VUE2速成-5(插件及打包)
    文章目录​​一、Vue的插件大全​​​​二、Vue插件举例​​​​1.轮播图插件(vue-awesome-swiper)​​​​2.UI组件库(ElementUI)​​​​三、vue-cli打包部署​​一、Vue的......
  • VUE2速成-3(路由进一步及Ajax请求)
    文章目录​​一、路由进一步​​​​1.命名路由​​​​2.重定向和别名​​​​3.HTML5History模式​​​​4.导航守卫​​​​4.1全局前置守卫​​​​4.2全局后置......
  • vue2转vite判断当前运行环境
    vue2转vite判断当前运行环境vue2判断当前运行环境使用的是process.env.NODE_ENV==='development',而当转为vite项目时,process会报错,这里环境的判断应该改为import.meta.......