vue 页面上有多个vue实例

Posted 2023-03-18

1、响应式属性和方法
每个 Vue 实例都会代理其 data 对象里所有的属性。
var data = a: 1
var vm = new Vue(
data: data
)

vm.a === data.a // -> true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 312345678910111213

即：都可以使vm.xxx这种方式获取和修改实例属性。
注意：
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。
那么这种情况的话，可以使用VueJs的vm.$xxx的方式来修改实例属性，这同样会触发视图更新，响应式的改变。
2、生命周期钩子
生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed
钩子的 this 指向调用它的 Vue 实例
我们可以在钩子的方法中使用this来指代当前实例。Vuejs中没有控制器的概念，组件的自定义逻辑可以分割在这些钩子里面。
3、插值 参考技术A router-view:页面显示路由组件内容，默认显示defalut组件内容，如果要显示多个组件内容需要使用带有name属性，来显示具名路由;带有name属性的router-view需放在父级路由页面。

如何不使用多个 Vue 的实例

【中文标题】如何不使用多个 Vue 的实例

【英文标题】：How to not use multiple Vue's instances

【发布时间】：2019-01-15 16:19:06

【问题描述】：

我刚刚开始使用 Vue，但我找不到一个非常基本的问题的直接答案。

我有一个 php 项目，我想用 VueJS 替换 jquery。 我现在正在做的是对于每个页面，我都有一个 Vue 实例 (new Vue()) 但我认为这不是最好的工作方式。

有没有办法只实例化一次vue，然后对于每个页面，我将页面的方法添加到其中？

我不使用 Vue 的路由。 我的路由来自我的 PHP 框架。

我想用js来操作DOM，调用一些API等等。

我可以只使用组件来与 dom 交互而不添加一些标签吗？

我有一个搜索引擎完整的 JS，我不把它用作组件

【问题讨论】：

是的，使用单个 Vue 组件，仅此而已。其他组件应该是主组件的子组件。

我可以只使用组件来与 dom 交互而不添加一些标签 " 吗？因为我有一个搜索引擎完整的 JS 而我没有将其用作组件

【参考方案1】：

当然，你可以做到这一点没问题。我使用的方法与您所要求的完全一样。我是 C# 开发人员而不是 php 开发人员，但每个后端系统都有某种方法来创建系统中大多数网页使用的模板。例如，该模板通常用于保存网站页眉和页脚的标记。在 ASP.NET Core 中，该文件称为 _layout.cshtml。毫无疑问，您的 php 框架具有类似的概念和文件。它将被命名为其他名称，但用途相同。

我提到这一点是因为这样的文件是“新建”你的 vue 实例的理想场所，因此它可用于所有页面，因为所有页面都包含来自该模板的内容以获取其页眉和页脚 html .

这样就解决了您问题的第一部分。下一部分是单个页面如何向 vue 实例添加额外的方法和数据？最好的方法是通过 vue mixin。实例化 vue 时，您可以指定应合并到 vue 实例中的 mixin 数组。所有的数据、方法、手表等都从 mixin 合并到 vue 实例中。官方文档在这里：https://vuejs.org/v2/guide/mixins.html

基本结构是这样的：

在页面特定的 javascript 运行之前将其放置在您的模板中：

 var mixinList = [];

在特定页面上的位置：

 var pageMixin = 
        data: function () 
            return 
                 someData: 'someValue'
            
         ,
        methods: 
             someMethod:function(someParam) 
                 //does work
             
         
 

 mixinList.push(pageMixin);

在页面特定的 javascript 运行后放置在布局中：

 var app = new Vue(
        el: '#appTemplate',
        mixins: mixinList,                 //This is what includes the mixins in the vue instance
        data:

        ,
         methods: 
             aMethod:function(aParam) 
                 //does work
             
         
 );

我还在这个 *** 答案中写过这种方法：Why is mixing Razor Pages and VueJs a bad thing?

**鉴于我是从内存中输入的大部分代码，此代码可能存在语法错误，但我每天在我的项目中使用类似的代码。如果您有任何问题，请告诉我。

【参考方案2】：

拥有多个 vue 实例绝对不是一个好主意。 要拥有多个页面，您应该使用Vue router。

拥有一个 Vue 实例将允许您在组件之间共享使用的插件。

您可以在其中定义将路由器和存储关联的主 js 文件（如果您不需要在组件之间共享大量数据，则可能不需要它）到您的 vue 实例：

import App from './App'
import router from './router'
import store from './store'

// Plugins shared
Vue.use(Vuelidate)
Vue.use(BootstrapVue)

new Vue(
  el: '#app',
  router,
  store,
  template: '<App/>',
  components:  App ,
)

您的 App 组件（根组​​件）：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default 
    name: 'app',
  
</script>

<style lang="scss">
@import "./scss/variables";
@import "./scss/colors";

#app 
  position: relative;
  padding-top: $full-page-top-padding-xl;
  min-height: 100vh;

</style>

您的路线：

import Vue from 'vue';
import Router from 'vue-router';
import Page1 from '@/Page1';
import Page2 from '@/Page2';

Vue.use(Router);

const router = new Router(
  routes: [
    
      path: '/mypage1',
      name: 'Page1',
      component: Page1,
    ,

      path: '/mypage2',
      name: 'Page2',
      component: Page2,
    
...

【讨论】：

这是我想做的，但由于我的 php 框架的路由（我认为？）在我的情况下无法使用路由（我认为？）或者来自 vue 的路由不会重定向，它只是指示链接是否匹配，所以使用这个组件？

你需要做什么不是很清楚。如果您需要使用 Vue 构建您的界面，那么您只需要一个实例。您不能将 2 个不同的应用程序链接在一起，这些应用程序构建在不同的框架上，使用相同的 url 来显示不同的页面...

我不知道你为什么要使用Vue，但这似乎不是一个好主意