vue的extends的使用
Posted luguankun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的extends的使用相关的知识,希望对你有一定的参考价值。
vue的extends和mixins类似,通过暴露一个extends对象到组件中使用。
extends会比mixins先执行。执行顺序:extends > mixins > 组件
extends只能暴露一个extends对象,暴露多个extends不会执行
test.js
//暴露两个mixins对象 export const mixinsTest = { methods: { hello() { console.log("hello mixins"); } }, beforeCreate(){ console.log("混入的beforeCreated"); }, created() { this.hello(); }, } export const mixinsTest2 = { methods:{ hello2(){ console.log("hello2"); } }, created() { this.hello2(); }, } //只能使用一个extends对象,多个无效,extends会先于mixins执行 export const extendsTest = { methods: { hello3() { console.log("hello extends"); } }, beforeCreate(){ console.log("extends的beforeCreated"); }, created() { this.hello3(); }, }
vue组件
<template> <div> home </div> </template> <script> import {mixinsTest,mixinsTest2,extendsTest} from ‘../util/test.js‘ export default { name: "Home", data () { return { }; }, beforeCreate(){ console.log("组件的beforeCreated"); }, created(){ console.log("1212"); }, mixins:[mixinsTest2,mixinsTest], // 先调用那个mixins对象,就先执行哪个 extends:extendsTest // 使用extends } </script> <style lang="css" scoped> </style>
以上是关于vue的extends的使用的主要内容,如果未能解决你的问题,请参考以下文章