vue3 如何采用 App.vue定义全局变量与方法，并实现局部vue页面刷新

Crhy、Y

已于 2024-01-15 08:33:25 修改

阅读量2.6k

点赞数 45

分类专栏： vue 前端大数据文章标签：前端 elasticsearch 大数据搜索引擎

于 2024-01-08 16:59:03 首次发布

本文链接：https://blog.csdn.net/m0_60769905/article/details/135460774

版权

本文详细描述了如何在Vue项目中，通过prop和全局方法配合，实现在主页面A点击列表项后，子页面B内容自动改变的需求。通过提供和注入、prop传递以及App.vue中的全局方法，确保数据的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述：
两个VUE页面，A为主页面，B为子页面。现需求为，在A页面点击li数据后，B页面内容自动改变。

一、分析

二、代码示例

一、分析

网上解决方案一般使用provide和inject来定义全局变量和方法，并在局部页面中刷新。但多次尝试后并不适合，以下是prop 父子传值以及全局方法配合实现；

二、代码示例

主页面（A.vue）

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="handleClick(item)">{
  { item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1&

最低0.47元/天解锁文章