vue的mixin怎么使用
本篇内容介绍了“vue的mixin怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
公司主营业务:网站制作、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出高港免费做网站回馈大家。
mixin
mixin主要是针对vue的js逻辑复用,所以它一般都是js文件。
用法
先来看看它的用法
// name.js export default { data () { return { name: 'mixin的name', obj: {name:'mixin', value:'mixin'} } }, methods: { getName () { console.log('我是mixin,name:', this.name) console.log('obj:', this.obj) } }, mounted () { console.log('我是mixin的mounted') this.getName() } }
它的用法和vue组件的用法是一样的。 比如钩子函数,methods的方法,data的数据等等。
然后在组件使用,通过mixins
选项即可引入。
import name from './name.js' export default { mixins: [name], data () { } }
那么就会有一个问题,那么如果组件内也定义了同样的钩子函数,同名方法,同名数据,该以谁的为准?是覆盖还是合并?
通过例子来看看
import name from './name.js' export default { mixins: [name], data () { name: '组件的name', obj: {name:'component'} }, methods: { getName () { console.log('我是组件,name:', this.name) console.log('obj:', this.obj) } }, mounted () { console.log('我是组件的mounted') this.getName() } }
打印的结果如下:
通过以上结果可以得到,
钩子函数会合并起来,都会执行。先执行mixins的钩子函数再执行组件的钩子函数。
data的同名数据,要分情况讨论
如果是基本类型,会用组件的同名数据覆盖mixin的数据。
但是如果是对象,会递归对比key,如果是同名key则会覆盖,如果不是同名的,则保留。
methods的方法也是一样,会用组件的方法覆盖mixin的同名方法。
除了上面这些选项,还有比如components
(组件),和directives
(指令)等也是一样的逻辑,同名的会覆盖,以组件的为优先。
“vue的mixin怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
新闻标题:vue的mixin怎么使用
标题URL:http://scyanting.com/article/gdscjd.html