本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于vue混入的相关操作介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
定义:混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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
|
选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
比如,数据对象在内部会进行递归合并,在和组件的数据发生冲突时以组件数据优先。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var mixin ={
data: function (){
return {
messageL: 'hello' ,
foo: 'abc'
}
},
created(){
console.log( '混入对象的钩子被调用' )
}
}
new Vue({
mixins:[mixin],
data: function (){
return {
message: 'goodbye' ,
bar:'def
}
},
created: function (){
console.log( '组件钩子被调用' )
console.log(this. $data );
}
})
|
值为对象的选项,例如methods,components和directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
阅读剩余部分
相关阅读 >>
javascript如何删除html元素
js中4种数组遍历方法( for 、foreach() 、for/in、for/of)的区别
javascript有几种方式为元素添加事件
javascript中怎么换行
分享dom中的表单操作,节点操作
javascript调用函数方法有哪些
javascript知识点总结之 函数与事件
es6中变量的解构赋值的用法介绍(附代码)
了解typescript和javascript之间的差异
javascript怎么设置月份
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue混入的相关操作介绍(附示例)