Question

我是 Vue.js 的新手，我正在搞乱它。有没有办法创建可重用的方法和数据？

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

page1.html

while(loop > 0) {

   // Do your stuff...

   // Decrement loop. It will eventually become zero
   // and the conditional in the while statement will fail.
   --loop;
}

page2.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 -->

reusable.js

<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 的VM上访问数据或添加方法，因此我可以在 page1.js <上访问它/ em>或 page2.js 。我不知道该怎么做，但我希望实现这样的目标：

page1.js

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

page2.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 } } });

我知道// 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 } } });是错的（我只是让你们知道我想要实现的目标）。

你有什么建议吗？

Answer 1

也许你可以使用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');
            }
        }
    });

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

1 个答案: