如何用方法扩展vuejs？

Question

我目前正试图围绕如何扩展vuejs实例.具体来说,我想分离一个实例,以便我可以重用实例的基础(元素和数据).我目前有不同的(laravel/blade)视图用于添加和编辑项目(域),我想在这两者之间共享一个vuejs实例,但我不想在两个地方拥有相同的代码(基础).

基本上,我正在寻找的是以下内容:

<script type="text/javascript">
    var vue = new Vue({

    el: '#domain',

    data: {
        form: {
            'name'        : '',
            'git_repo'    : '',
            'auto_deploy' : '',
            'create_db'   : ''
        },
        ajaxResponse : ''
    }

    });
</script>

<script type="text/javascript">
    Vue.extend('domain_methods', {

        methods: {

            postDomain: function () {
                this.$http.post('{{ route('domain.store') }}', function (data, status, request) {
                    this.$set('ajaxResponse', data);
                }, {
                    data: this.form
                } ).error(function (data, status, request) {
                    this.$set('ajaxResponse', data);
                });
            }

        }

    });
</script>

但这显然不起作用.我只想在#domain元素中使用postDomain()方法,而不是在初始创建实例时编写方法.

提前致谢!

Answer 1

要小心-你是混为一谈的用法.extend()与的.component().他们做了很多不同的事情.这部分文档提供了有关差异的更多信息:

http://vuejs.org/guide/components.html

在这种特殊情况下,只需通过声明您的顶级Vue类.extend(),然后使用它作为构造函数来实例化它的子类.这为您提供了类似继承的行为.

所以,例如:

<script type="text/javascript">
    var MainVue = Vue.extend({
        data: function () {
            return {
                form: {
                    'name'        : '',
                    'git_repo'    : '',
                    'auto_deploy' : '',
                    'create_db'   : ''
                },
                ajaxResponse : ''
            };
        }
    });
</script>

<script type="text/javascript">
    var secondary_vue = new MainVue({
        el: '#domain',
        methods: {
            postDomain: function () {
                this.$http.post('{{ route('domain.store') }}', function (data, status, request) {
                    this.$set('ajaxResponse', data);
                }, {
                    data: this.form
                } ).error(function (data, status, request) {
                    this.$set('ajaxResponse', data);
                });
            }
        }
    });
</script>