vue.js - 请问如何修改 Vue-loader 出来的 component 方法

问题描述

问 题

例如：

// t.vue
<template>
    <h1>1</h1>
</template>


<script>
export default {
    created () {
        console.log(1);
    },
};
</script>

const t = require('./t.vue');

t.created = function () {
    console.log(2);
}

发现 require 出来之后，无法重写 component object 的方法，请问需要如何才能重写呢？

解决方案

今天看到一篇文章，就试了一下，发现用 extends 是可行的：

var originalComponent = Vue.component('original', {
  created: function () {
    console.log('original component created!')
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
})

var extComponent = Vue.extend({
  extends: [originalComponent],
  created: function() {
    console.log('override old created!')
    this.hello()
  },
  methods: {
    hello: function() {
      console.log('hello from self!')
    }
  }
})
new extComponent()

http://jsfiddle.net/hugaungju...

---

原答案

可以试试 Vue.extend

请输入代码

Vue.component('originalAvatar', Avatar);
const newAvatar = Vue.component('originalAvatar').extend({
  /* Your spec */
});

https://stackoverflow.com/a/4...

这篇关于vue.js - 请问如何修改 Vue-loader 出来的 component 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！