VUE学习-mixin混入
mixin混入
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
组件式混入
// 定义一个混入对象
var myMixin = {
created: function () {this.hello()},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({mixins: [myMixin]})
var component = new Component() // => "hello from mixin!"
vue实例混入
数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
var mixin = {
data: function () {
return {message: 'hello',foo: 'abc'}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {message: 'goodbye',bar: 'def' }
},
created: function () {
console.log(this.$data)
}
// => { message: "goodbye", foo: "abc", bar: "def" }
})
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.conflicting() // => "from self"
全局混入
一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption;
if (myOption) {console.log(myOption)}
}
})
new Vue({myOption: 'hello!'})
// => "hello!"
自定义选项合并策略
自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies
添加一个函数。
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
/* 返回合并后的值 */
}
// Vuex 1.x 的混入策略
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}
页面混入模块
var mixinClock = {
data() {
return {
clock: '',
interalId: '',
}
},
created() {
this.interalId = setInterval(()=>{
this.setClock()
}, 1000)
},
destroyed() {
clearInterval(this.interalId)
},
methods:{
setClock() {
this.clock = this.dateTimeFormatter(new Date())
console.log(this.clock)
},
dateTimeFormatter(_date) {
let date = new Date(_date);
let y = date.getFullYear();
let M = (date.getMonth()).toString().padStart(2, '0');
let d = (date.getDate()).toString().padStart(2, '0');
let h = (date.getHours()).toString().padStart(2, '0');
let m = (date.getMinutes()).toString().padStart(2, '0');
let s = (date.getSeconds()).toString().padStart(2, '0');
return `${y}-${M}-${d} ${h}:${m}:${s}`
}
}
}
new Vue({
el: '.main-container',
mixins: [mixinClock],
})
VUE学习-mixin混入的更多相关文章
- vue.js3 学习笔记 (一)——mixin 混入
vue 2 中采用选项式API.如:data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一 ...
- vue + mixin混入对象使用
vue提供的混入对象mixin,类似于一个公共的组件,其他任何组件都可以使用它.我更经常的是把它当成一个公共方法来使用 在项目中有些多次使用的data数据,method方法,或者自定义的vue指令都可 ...
- vue学习(十)mixin 偷懒
一 mixin混入偷懒技术 架子 <div id="app"> {{msg}} </div> <script> let app = new Vu ...
- Vue mixin(混入) && 插件
1 # mixin(混入) 2 # 功能:可以把多个组件公用的配置提取成一个混入对象 3 # 使用方法: 4 # 第一步:{data(){return {...}}, methods:{...},.. ...
- vue中的混入
数据对象合并 数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先 var mixin = { data() { return { msg_mixins: 'mixin ...
- vue的mixin简化开发
vue的mixin可以将多个组件公用的声明周期方法和数据封装成一个对象,在不同的组件中自由插拔.实际做项目的时候,可以定义一些mixin,供多个组件使用.也非常有必要定义一个全局的mixin对象,对所 ...
- VUE mixins(混入)
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- vue之mixin理解与使用
使用场景 当有两个非常相似的组件,除了一些个别的异步请求外其余的配置都一样,甚至父组件传的值也是一样的,但他们之间又存在着足够的差异性,这时候就不得不拆分成两个组件,如果拆分成两个组件,你就不得不冒着 ...
- VUE学习笔记(李天禹老师版本)
目录 VUE 一 脚手架文件结构 二 关于不同版本的Vue 三 vue.config.js配置文件 vue文件的基本结构 components 四 ref属性 TIPS 五 props配置项 Tips ...
随机推荐
- python之路 57 linux 基础 命令与执行效果
虚拟环境的安装与配置 1.VMware软件安装 这里有一个15版本和一个16版本的 链接:https://pan.baidu.com/s/1vkNxxQ6NS9q7XYJ6qiVMaQ 提取码:t3l ...
- Flutter帧率监控 | 由浅入深,详解获取帧率的那些事
前言 做线上帧率监控上报时,少不了需要弄明白如何通过代码获取实时帧率的需求,这篇文章通过图解配合Flutter性能调试工具的方式一步步通俗易懂地让你明白获取帧率的基础知识,以后再也不愁看不懂调试工具上 ...
- 打包iOS App并上架到TestFlight测试
开发者账号 首先需要注册一个开发者账号,不然什么都免谈.在手机Apple Developer上注册给钱就行了,个人开发者一年688元. 打包App App开发好后,就可以通过XCode打包.打包前选好 ...
- 大公司为什么禁止SpringBoot项目使用Tomcat?
本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...
- 除了Navicat和DBeaver,还有没有免费又好用的数据库管理/SQL工具推荐
很多国内SQL学习者和开发者对Navicat.DBeaver等国外数据库管理工具已经很熟悉了.但是,有没有比他们更适合SQL开发者的数据库管理/SQL工具呢?这里,笔者结合自己的调研来聊一下. 笔者做 ...
- 读Java8函数式编程笔记08_测试、调试和重构
1. Lambda表达式的单元测试 1.1. 单元测试是测试一段代码的行为是否符合预期的方式 1.2. Lambda表达式没有名字,无法直接在测试代码中调用 1.2.1. 将Lambda表达式放入一个 ...
- mysql查询逗号,分隔的多个id连表查询
先来几个SQL看看效果 SELECT i.*,n.*FROM iLEFT JOIN n on FIND_IN_SET(n.id, i.n_id)GROUP BY n.id效果图: 想把信息都放一行里面 ...
- MRS_MounRiver安装与驱动相关问题汇总
解决问题如下: MounRiver下载与安装 若MounRiver某些功能不全或插件没安装 MounRiver下载与安装 MRS官网下载:http://www.mounriver.com/downlo ...
- .NET周报 【2月第1期 2023-02-04】
国内文章 .NET 入门到高级路线 https://www.cnblogs.com/hejiale010426/archive/2023/02/01/17083913.html 笔者介绍了.NET入门 ...
- vue3 | shallowReactive 、shallowRef、triggerRef
shallowReactive 使用 reactive 声明的变量为递归监听,使用 shallowReactive 声明的变量为非递归监听(通俗的讲就是 reactive 创建的对象将会被 vue 内 ...