VUE mixin 使用示例详解
目录
- mixin 混入
- 组件 data 优先级高于 mixin data 优先级
- 2 mixin 生命周期优先级
- mixin 中的生命周期函数和组件的生命周期函数都会执行，而且 mixin 中的优先级更高。
- 3 局部 mixin 和全局 mixin
- 全局 mixin 写法：
- 4 自定义属性的优先级
- 自定义属性组件的优先级比 mixin 优先级高。
- mixin总结：
mixin 混入
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
data() {
return {
number: 2,
count: 3
}
}
}
const app = Vue.createApp({
data() {
return {
number: 1
}
},
mixins: [MyMixin],
template: `
<div>number:{
<!-- -->{number}}</div>
<div>count:{
<!-- -->{count}}</div>
`
});
app.mount('#root');
</script>
</html>
mixin 混入可以在组件内部缺少数据时，使用mixin内的数据代替。
组件 data 优先级高于 mixin data 优先级
上述代码中，count 使用了 mixin 内的数据，由于内部 number 已经被定义，vue 优先使用内部的数据，再使用 mixin 的数据。
2 mixin 生命周期优先级
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
created(){
console.log('mixin created')
}
}
const app = Vue.createApp({
mixins:[MyMixin],
created(){
console.log('app created')
}
});
app.mount('#root');
</script>
</html>
mixin 中的生命周期函数和组件的生命周期函数都会执行，而且 mixin 中的优先级更高。
效果如下：
3 局部 mixin 和全局 mixin
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
data(){
return{
number:123
}
}
}
const app = Vue.createApp({
mixins:[MyMixin],
template:`<app/>`
});
app.component("app",{
template:"<div>number:{
<!-- -->{number}}</div>"
})
app.mount('#root');
</script>
</html>
使用 mixins:[myMixin] 是局部载入mixin的方式，子组件不能获得 mixins 的值
运行结果如下：
全局 mixin 写法：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `<app/>`
});
app.mixin({
data() {
return {
number: 123
}
}
})
app.component("app", {
template: "<div>number:{
<!-- -->{number}}</div>"
})
app.mount('#root');
</script>
</html>
使用 app.mixin 挂载就是全局，组件可以自由使用。
效果如下：
4 自定义属性的优先级
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const myMixin = {
value: 1
}
const app = Vue.createApp({
mixins: [myMixin],
value: 25,
template: `<div>{
<!-- -->{this.$options.value}}</div>`
});
app.mount('#root');
</script>
</html>
vue 中，自定义属性就是直接写到vue下的属性，使用 this.$options.value 即可访问。
自定义属性组件的优先级比 mixin 优先级高。
结果如下：
mixin总结：
组件 data，methods优先级高于 mixin data，methods 优先级
生命周期函数，先执行 mixin 里边的，再执行组件里边的
自定义的属性，组件中的优先级高于 mixin 属性的优先级。
到此这篇关于VUE mixin 使用的文章就介绍到这了,更多相关VUE mixin 使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解vue之mixin的使用
目录 vue之mixin的使用 mixin之中的data数据访问 mixin / index.js Home.vue About2.vue mixin中的 methods方法和computed使用 mixin / index.js Home.vue About2.vue 总结 vue之mixin的使用 作用:在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了 data数据的等访问原则:若是使用mixin
-
vue中混入mixins的使用方法
目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,
-
vue使用mixins优化组件
vue 提供了 mixins 这个 API,可以让我们将组件中的可复用功能抽取出来,放入 mixin 中,然后在组件中引入 mixin,可以让组件显得不再臃肿,提高了代码的可复用性. 如何理解 mixins 呢 ?我们可以将 mixins 理解成一个数组,数组中有单或多个 mixin,mixin 的本质就是一个 JS 对象,它可以有 data.created.methods 等等 vue 实例中拥有的所有属性,甚至可以在 mixins 中再次嵌套 mixins,It's amazing ! 举个
-
详解Vue.js Mixins 混入使用
Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h
-
Vue中的混入的使用(vue mixins)
使用场景: 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码. 选项合并 var mixin = { data: function () { return { message: 'hello' } }, created:function(){ console.log('我是mixins中的created') }, methods:{ show:function(num){ console
-
vue3 mixin 混入使用方法
目录 一.mixin 如何使用 ? 二.mixin 使用时注意点 2.1.使用 mixin 对象时,组件内部和 mixin 包含相同选项,如何处理呢? 2.2.使用的 mixin 对象选项 和实例中的选项拥有相同的属性该如何处理? 2.3.mixin 对象也可以添加生命周期钩子函数 三.mixin 自定义属性 四.合并策略 五.全局配置 mixin vue 2 中采用选项式API 如: data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种
-
vuejs中使用mixin局部混入/全局混入的方法详解
目录 前言 需求 什么是mixin 全局混入 几个重要的疑问 选项合并 生命周期函数 data数据冲突 方法名冲突 mixin的优缺点 1.变量名来源不明确 2. 多个mixins的生命周期会合并融合到一起运行,但是同名属性,同名方法无法融合,会导致冲突或覆盖 3. mixins和组件可能出现多对多的关系,复杂度会变高 mixin优点 总结 前言 我们在实际项目开发中,有很多基本相似功能模块,只是操作显示数据不同,很多逻辑和配置都是相同的 在Vue项目里,每个单文件组件都是一个模块组件,每个组件
-
vue3和vue2中mixins的使用解析
目录 前言 Vue2 1.封装的mixin方法 2.具体页面引用 abc.vue 3.具体页面使用 abc.vue vue3官方入口(个人建议,不要再mixin用setup) 一.封装mixin里面具有setup 具体步骤 二.不需要在mixin里面使用setup (官方支持用法) 具体使用 前言 vue的mixins里面放公共的js方法,但是vue3之后使用方法还是有些改变,这里来罗列下他们的区别. Vue2 1.封装的mixin方法 export const homeSensors = {
-
vue中的mixins混入使用方法
目录 作用 使用方法 全局混入 局部混入 作用 用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术,使用这个技术我们可以把需要复用的内容封装成一个vue组件,方便下次使用方便 使用方法 首先在src中去创建一个自己的文件夹,然后把要封装的内容放入到这个文件夹,方便后续的调用 let mymixin={ methods:{ handleBtn(){ alert('封装的内容已经触发!') } } } export default mymixin 全局混入 全局混入就是我们可以把封装好的
-
VUE mixin 使用示例详解
目录 mixin 混入 组件 data 优先级高于 mixin data 优先级 2 mixin 生命周期优先级 mixin 中的生命周期函数和组件的生命周期函数都会执行,而且 mixin 中的优先级更高. 3 局部 mixin 和全局 mixin 全局 mixin 写法: 4 自定义属性的优先级 自定义属性组件的优先级比 mixin 优先级高. mixin总结: mixin 混入 <!DOCTYPE html> <head> <meta charset="UTF-
-
vue全局数据管理示例详解
目录 记账页面标签页面新增 将API封装到window 用computed计算属性 记账页面标签页面新增 记账页面和标签页面都可以新增标签.可是现在有一个bug.在标签页面新增标签之后,在记账页面不会自动同步,要刷新一下才能同步. 这是因为这两个页面的数据tagList都是分别从tagListModel里fetch的.所以就导致了数据不同步. 解决方案:在更高一层的地方统一去tagListModel里fetch一次,把取出来的设成一个全局的属性,然后分别在两个页面直接使用. 我们选择在main.
-
petite vue的使用示例详解
目录 题引: 特征及使用: 1. CDN引入: 2.module引入 3. 组件化 4. 模板组件 结尾: 题引: 这几天在公司没事做,于是上网看看有关vue的文章,忽然看到尤大大的一个文章:只有5kb大小的mini vue,好家伙,又整活了,这不得冲一冲嘛. 特征及使用: petite-vue体积更小,约5bk: 对渐进的增强更加的明显,特别是运用在服务端渲染的页面上更是便捷.系统看了一下,语法跟vue的语法绝大部分是一样了,除了增加了一些新的语法糖: 基于reactive进行响应式 peti
-
Vue生命周期示例详解
首先看看Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========&q
-
关于Vue Webpack2单元测试示例详解
前言 最近发现一个问题,vue-cli 提供的官方模板确实好用.但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服. 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把.这里分享一下配置带覆盖率的单元测试.分享出来供大家参考学习,话不多少了,来一起看看详细的介绍: 一.文件结构 基本的文件结构. ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │ ├─specs │ ├
-
Vue 中mixin 的用法详解
说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父
-
vue 之 .sync 修饰符示例详解
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂
-
Vue中的vue-resource示例详解
vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro
-
vue cli4下环境变量和模式示例详解
本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con
-
Flutter 中 Dart的Mixin示例详解
原文在这里.写的不错,推荐各位看原文. 这里补充一下Mixin的定义: 只要一个类是继承自Object的而且没有定义构造方法,那么这个类可以是一个Mixin了.当然,如果你想让mixin的定义更加的清晰,可以使用mixin关键字开头来定义.具体请参考这里 原文截图体会一下风格. 正文 在经典的面向对象编程语言里一定会有常规的类,抽象类和接口.当然,Dart也有它自己的接口,不过那是另外的文章要说的.有的时候阴影里潜伏者另外的野兽:Mixin!这是做什么的,如何使用?我们来一起发现. 没有mixi