如何在当前Vue实例上添加方法或数据

How to add methods or data on current Vue instance?

本文关键字：添加 方法 数据 实例 Vue      更新时间：2023-09-26

我刚开始使用Vue.js，我正在摆弄它。是否有一种方法可以创建可重用的方法和数据?

这是我想要实现的非常简单的代码:

page1.html 

<div id="app">
  <button type="button" v-on="click: foo()">Foo</button> 
  <button type="button" v-on="click: bar()">Bar</button>
</div>
<script src="reusable.js"></script> 
<script src="page1.js"></script>  <-- Custom script -->

page2.html 

<div id="app">
  <button type="button" v-on="click: foo()">Foo</button> 
  <button type="button" v-on="click: baz()">Baz</button>
</div>
<script src="reusable.js"></script> 
<script src="page2.js"></script>  <-- Custom script -->

reusable.js 

var vm = new Vue({
  el: '#app',
  data: {
    name: 'John'
  },
  methods: {
    foo: function(){
      console.log('foo');
    }
  }
});

现在我想访问我的可重用的.js的VM上的数据或添加方法，所以我可以访问它在我的page1.js或page2.js。我不知道怎么做，但我想实现这样的东西:

page1.js 

// adds a new method on my reusable.js's vm
vm.extend({
  methods: {
    bar: function(){
      // triggers when I click the bar button
      console.log('bar'); 
      console.log(this.name); // John
    }
  }
});

page2.js 

// adds a new method on my reusable.js's vm
vm.extend({
  methods: {
    baz: function(){
      // triggers when I click the baz button
      console.log('baz');
      console.log(this.name); // John
    }
  }
});

我知道vm.extend是错误的(我只是给你们一个我想要实现的想法)。

你有什么建议吗?

也许你可以使用mixins?就像这样:

var mix = {
    methods : {
        bar : function() {
            console.log('bar')
        }
    }
};
var demo = new Vue({
    el: '#demo',
    mixins : [mix],
    methods : {
        foo: function() {
            console.log('foo')
        }
    }
});

演示:http://jsfiddle.net/dewey92/yMv7y/965/

来源:http://vuejs.org/guide/extending.html

所以在你的例子中:

Page1.html: 

<div id="app">
    <button type="button" v-on="click: foo()">Foo</button> 
    <button type="button" v-on="click: bar()">Bar</button>
</div>
<script src="page1.js"></script>  <-- Custom script (or page2.js) -->
<script src="reusable.js"></script>

page1.js: 

var mix = {
    methods : {
        bar : function() {
            console.log('bar')
        }
    }
};

page2.js: 

var mix = {
    methods : {
        baz : function() {
            console.log('baz')
        }
    }
};

reusable.js: 

var vm = new Vue({
        el: '#app',
        mixins: [mix],
        data: {
            name: 'John'
        }
        methods: {
            foo: function(){
                console.log('foo');
            }
        }
    });
相关文章：