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

Question

我目前有一个 Laravel 应用程序，它使用 Vue.js 作为前端 JavaScript 框架。对于大型脚本，我使用组件，但对于较小的脚本，我希望仅在 Blade 模板中使用 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)

我可以通过控制台注销，因此可以正常工作，但 View 无法获取数据。但是，如果我删除 app.js 文件中的全局实例，这确实有效。

谢谢

Answer 1

同一个页面元素中不能有两个 View 模型(即两个 Vue 实例)，如果您想使用不同的 Vue 实例，则需要为每个实例创建不同的 JavaScript 包，或者只需添加一个 Vue 实例位于 Blade 模板中，并且不包含 app.js。