Vue.js-混合 原
时间:2022-06-19
本文章向大家介绍Vue.js-混合
原,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
基础 混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式,混合对象可以包含任意组件选项。以 组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项
<body class="">
<div id="example">
</div>
<script src="js/vue.js"></script>
<script>
//定义一个混合对象
var myMixin = {
created:function(){
this.hello()
},
methods:{
hello:function(){
console.log("hello form mixin!")
}
}
}
//定义一个使用混合对象的组件
var Component = Vue.extend({
mixins:[myMixin]
})
var component = new Component();//hello form mixin!
</script>
</body>
选项合并 当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。比如同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子之前调用
<body class="">
<div id="example">
</div>
<script src="js/vue.js"></script>
<script>
//定义一个混合对象
var mixin={
created:function(){
console.log("混合对象的钩子被调用")
}
}
new Vue({
mixins:[mixin],
created:function(){
console.log("组件钩子被调用")
}
})
</script>
</body>
// => "混合对象的钩子被调用"
// => "组件钩子被调用"
值为对象的选项,例如methods,components 和directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对
<body class="">
<div id="example">
</div>
<script src="js/vue.js"></script>
<script>
var mixin={
methods:{
foo:function (){
console.log("foo")
},
conflicting:function(){
console.log("from mixin")
}
}
}
var vm = new Vue({
mixins:[mixin],
methods:{
bar:function(){
console.log("bar")
},
conflicting:function(){
console.log("from self")
}
}
})
vm.foo()//foo
vm.bar()//bar
vm.conflicting()//from self
</script>
</body>
注意:Vue.extend()也使用同样的策略进行合并
全局混合 也可以全局注册混合对象。注意使用!一旦使用全局混合对象,将会影响到所有之后创建的Vue实例。使用恰当时,可以为自定义对象注入处理逻辑
<body class="">
<div id="example">
</div>
<script src="js/vue.js"></script>
<script>
Vue.mixin({
created:function(){
var myOption = this.$options.myOption
if(myOption){
console.log(myOption);
}
}
})
new Vue({
myOption:"hello"
})
</script>
谨慎使用全局混合对象,因为会影响到每个单独创建的Vue实例(包括第三方模板),大多数情况下,只应当应用于自定义选项,就像上面实例一样, 也可以将其用作Plugins以避免产生重复应用
(adsbygoogle = window.adsbygoogle || []).push({});
- Oracle BIEE (Business Intelligence) 11g 11.1.1.6.0 学习(4)创建多维钻取分析
- silverlight:RadMaskedTextBox设置MaskType="Numeric"及Mask="n"时的一个bug
- 微信里面最神秘的功能,你知道吗?
- 以大数据之名,变身!——In big data we trust
- 90%家长都不知道关于少儿编程的这些疑题!
- 常用SQL语句和语法汇总
- Python学习笔记1——斐波那契数列
- 视觉传感器几大技术要点详解!
- Spark之搜狗日志查询实战
- 区块链与数字货币是什么关系呢?
- 保存数据到MySql数据库——我用scrapy写爬虫(二)
- 人工智能将取代人类?危机亦或是新的机遇
- 大数据驱动的未来网络:体系架构与应用场景(下)网络架构与场景详解
- 冷静点,NVIDIA 禁止 Geforce 进数据中心想限制的并不是深度学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django开发快速入门
- 三阴性乳腺癌表达数据分析笔记之PAM50
- Celery入门
- TO-do api
- 炫酷,Spring Boot + ECharts 实现用户访问地图可视化(附源码)
- 互联网大厂常考算法及套路深度解析
- 2020--Python语法常考知识点
- 为什么你画的Seurat包PCA图与别人的方向不一致?
- 用Python程序模拟300位观众,为5位嘉宾随机投票,最后按照降序排列结果
- Python知识点
- 上盘硬菜,@Transaction源码深度解析 | Spring系列第48篇
- Python--网络编程和并发
- HashMap常见问题(更新中)
- 使用SNVSniffer软件找somatic mutation
- 腾讯云cvm 内存使用率监控指标解读