vue中mixin

基本使用

testMixin.js文件

export const myMix = {data() {return {name: '三毛',}},created() {console.log(3)},mounted() {console.log(4)},methods: {// 两个vue组件都引用了这个文件，一个vue组件触发这个方法，另外一个会执行吗logNumber() {console.log(666)},// vue组件中也有一个同名字的方法logComomon() {console.log('这是testMixin中的方法')},},}

mixin.vue文件；该文件使用了testMixin.js

<template><div class=""><p>vue中mixin的基本使用</p><p>{{ name }}</p></div>
</template><script>
import { myMix } from '../components/testMixin'
export default {data() {return {msg: 'hello',}},mixins: [myMix],created() {console.log(1)},mounted() {console.log(2)this.changeMixVal()},methods: {changeMixVal() {this.name = '张三疯'},},
}
</script>

基本使用和组件有点相似

1》首先引入mix文件到vue文件

2》添加到mixins:[]数组中

执行顺序

testMixin中created => vue组件中的created => testMixin中mounted => vue组件中的mounted

当然这里只考虑了同步任务，涉及异步要考虑浏览器的事件执行机制

methods中方法和data中的属性

1》vue组件可以读取和修改mixin.js中的data属性

2》vue组件可以调用mixin.js中的方法

3》当vue组件和mixin.js中有同名的方法时，调用的是vue组件自己的方法

4》两个vue组件都使用了mixin.js时；一个vue组件中修改mixin.js中的data,调用它的方法，另一个vue组价是不受影响的；这一点和组件相似，重复使用的组件时独立的

anotherMix.vue文件；另一个使用了testMixin.js的vue组件

<template><div class=""><h4>这是第二个使用testMixin文件的组件</h4><p>{{ name }}</p><button @click="changeMix">改变testMixin中的name值</button><button @click="logNumber">打印</button><button @click="logComomon">同名方法执行哪个</button></div></template><script>
import { myMix } from '../components/testMixin'
export default {data() {return {info: '干饭人',}},mixins: [myMix],created() {console.log(this.name)},methods: {changeMix() {this.name = '张三分'},logComomon() {console.log('这是anotherMix中的方法')},},
}
</script>

上图结果是从左往有点击三个按钮的结果

点击第一个修改了，testMixin.js中的name

点击第二个按钮，调用了testMixin.js中的方法

点击第三个按钮，执行的是组件内部的方法

[外链图片转存中…(img-i2NHP5kR-1645622881581)]

上图结果是从左往有点击三个按钮的结果

点击第一个修改了，testMixin.js中的name

点击第二个按钮，调用了testMixin.js中的方法

点击第三个按钮，执行的是组件内部的方法

虽然当前组件修改了，但是另外一个引用了 testMixin.js 的组件并没有任何变化

vue中的mixin相关推荐

什么是Mixin？带你了解Vue中的Mixin混入
什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据 ...
Vue中使用mixin
文章目录创建基础项目使用mixin mixin小结创建基础项目使用Vue脚手架创建一个项目,经改造后,项目目录如下所示, 其中,Company.vue的内容如下, <template&g ...
vue中mixin 感觉很牛逼（父子组件融合成一个新组件）
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
在Vue.js中使用Mixin
有一种很常见的情况:有两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过prop ...
mixin机制 vue_谈谈vue中mixin的一点理解
谈谈vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
vue中mixin的一点理解
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...
vue中create 什么触发_vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的 ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...

vue中的mixin

vue中mixin

基本使用

执行顺序

methods中方法和data中的属性

vue中的mixin相关推荐

最新文章

热门文章