我是新来的Vue.js我正在摆弄它。有没有办法创建可重用的方法和数据?
这是我想要实现的非常简单的代码:
第1页.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 -->
可重用.js
var vm = new Vue({
el: '#app',
data: {
name: 'John'
},
methods: {
foo: function(){
console.log('foo');
}
}
});
现在我想访问数据或添加方法可重用.js的虚拟机,所以我可以在我的page1.js or 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
是错误的(我只是让你们了解我想要实现的目标)。
你有什么建议吗?