如何在当前 Vue 实例上添加方法或数据? [英] How to add methods or data on current Vue instance?

问题描述

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

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

page1.html

<button type="button" v-on="click: foo()">Foo</button><button type="button" v-on="click: bar()">Bar</button>
<script src="reusable.js"></script><script src="page1.js"></script><-- 自定义脚本-->

page2.html

<button type="button" v-on="click: foo()">Foo</button><button type="button" v-on="click: baz()">Baz</button>
<script src="reusable.js"></script><script src="page2.js"></script><-- 自定义脚本-->

reusable.js

var vm = new Vue({el: '#app',数据: {姓名:'约翰'},方法: {富:功能(){console.log('foo');}}});

现在我想在我的 reusable.js 的 VM 上访问数据或添加方法，以便我可以在我的 page1.js 或 page2.js.我不知道该怎么做，但我想实现这样的目标:

page1.js

//在我的 reusable.js 的 vm 上添加一个新方法vm.extend({方法: {酒吧:功能(){//当我点击条形按钮时触发console.log('bar');console.log(this.name);//约翰}}});

page2.js

//在我的 reusable.js 的 vm 上添加一个新方法vm.extend({方法: {巴兹:功能(){//当我点击 baz 按钮时触发console.log('baz');console.log(this.name);//约翰}}});

我知道 vm.extend 是错误的(我只是让你们了解我想要实现的目标).

您有什么建议吗?

解决方案

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

var mix = {方法 : {酒吧:功能(){console.log('bar')}}};var 演示 = 新的 Vue({el: '#demo',混合:[混合]，方法 : {富:函数(){console.log('foo')}}});

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

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

所以在你的情况下:

Page1.html:

<button type="button" v-on="click: foo()">Foo</button><button type="button" v-on="click: bar()">Bar</button>
<script src="page1.js"></script><-- 自定义脚本(或 page2.js)--><script src="reusable.js"></script>

page1.js:

var mix = {方法 : {酒吧:功能(){console.log('bar')}}};

page2.js:

var mix = {方法 : {巴兹:函数(){console.log('baz')}}};

reusable.js:

var vm = new Vue({el: '#app',混合:[混合]，数据: {姓名:'约翰'}方法: {富:功能(){console.log('foo');}}});

I'm new to Vue.js and I'm messing around with it. Is there a way to create reusable methods and data?

Here's the very simple code I want to achieve:

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');
    }
  }
});

Now I'd like to access the data or add methods on my reusable.js's VM, so I can access it on my page1.js or page2.js. I have no idea how to do it, but I want to achieve something like this:

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

I'm aware that vm.extend is wrong (I just give you guys an idea of what I'm trying to achieve).

Do you have any suggestions?

解决方案

Perhaps you can use mixins? Pretty much like this:

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

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

Demo: http://jsfiddle.net/dewey92/yMv7y/965/

Source: http://vuejs.org/guide/extending.html

So in your case:

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 实例上添加方法或数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！