是否可以在应用程序中同时使用 Vue.js 组件和传统的 Vue 实例？答案

【问题标题】：Is it possible to use both Vue.js components as well as conventional Vue instances in an application?是否可以在应用程序中同时使用 Vue.js 组件和传统的 Vue 实例？
【发布时间】：2018-03-01 07:46:20
【问题描述】：

我目前有一个使用 Vue.js 作为前端 JavaScript 框架的 Laravel 应用程序。对于大型脚本，我使用组件，但对于较小的脚本，我希望只在刀片模板中使用 Vue 实例。

我遇到的问题是我目前必须以一种方式工作的 app.js 配置破坏了另一种方式，反之亦然。

require('./bootstrap');

window.Vue = require('vue');


Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));

const app = new Vue({
    el: '#app'
});

上面的工程组件，下面的工程用于创建实例。

require('./bootstrap');

window.Vue = require('vue');


Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));

我明白为什么这对导出到全局 Vue 实例的组件都不起作用我只是想知道是否有另一种配置方式可以使两种方式都起作用。

供您参考，我有一个 Vue 组件中的 Vue 脚本示例。

import axios from 'axios';

var csrf_token = $('meta[name="csrf-token"]').attr('content');

    export default {

        created() {
            this.blocks = JSON.parse(this.b);
            this.contractors = JSON.parse(this.c);
            this.token = csrf_token;
        },
        props: ['b', 'c'],

        data(){

            return {

              blocks: '',
              blockSelected: '',
              units: '',
              token: '',

            }
        },

        methods: {
          getUnits: function(){

            var self = this;

            axios.post('/getrepairsUnit', {
                    blockSelected: this.blockSelected,

                })
                .then(function(response) {

                    self.units = response.data;

                })
                .catch(function(error) {
                    console.log(error);
                });

          },
        }
    }

还有一个我的 Vue 实例的例子……

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      deposit: 0
    }
  });
  </script>

我在尝试运行 Vue 实例时遇到的错误如下：

[Vue warn]: Property or method "deposit" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)

我可以通过控制台注销，所以有点工作，但视图没有获取数据。但是，如果我删除 app.js 文件中的全局实例，这确实有效。

谢谢

【问题讨论】：

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

你不能在同一个页面元素中有两个视图模型（即两个 Vue 实例），如果你想使用不同的 vue 实例，你需要为每个实例创建不同的 JavaScript 包，或者简单地添加一个 Vue 实例刀片模板，不包括app.js。

【讨论】：

谢谢，我认为这可能是问题所在。找不到确认，感谢您的解决方案。
您可以拥有任意数量的 Vue 实例，只是不要安装在同一个元素上或相互嵌套。
@Bert 啊，当然，我只是在考虑整个页面。我认为答案仍然有效，但我会对其进行调整以澄清这一点。
为了帮助大家，我将组件从 app.js 文件中分离出来，并创建了一个符合 Laravel mix 的 components.js。我只在使用组件的页面上调用 components.js 文件。

【解决方案2】：

Vuejs 至少应该创建一个实例，并且它应该与一个 ID 绑定，如下所示

require('./bootstrap');

window.Vue = require('vue');


Vue.component('repairs', require('./components/repairs.vue'));
Vue.component('repair-show', require('./components/repair-show.vue'));

const app = new Vue({
    el: '#app'
});

这里

const app = new Vue({
        el: '#app'
    });

以上代码是 vuejs 应用程序的核心。这就是你的 vuejs 应用程序被引导的一点

确保你在使用 vuejs 时做同样的事情

【讨论】：