如何使用方法扩展 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

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

例如：

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