Vue中如何不通过按钮点击从其他Vue文件获取目标数据？

根据A.vue和B.vue的组件层级关系，选择对应方案即可，所有方案都不需要绑定按钮点击事件，数据会自动响应同步： #

场景1：两个组件为直接父子关系 #

情况1：B.vue是A.vue的子组件 #

直接通过Props传值即可，这是最简洁的实现方式：

1. 先修正原A.vue里的语法错误：属性冒号改成英文半角、数组对象之间补逗号，之后在A的模板里引入B组件时绑定要传的值：

<!-- A.vue -->
<template>
  <B :elementLen="element.length" />
</template>
<script>
import B from './B.vue'
export default {
  components: { B },
  data(){
    return{
      element: [
        { number: '11' },
        { number: '22' } 
      ]
    }
  }
}
</script>

2. 在B.vue里声明接收Props，直接在模板/逻辑里使用即可，element数组变化时长度会自动更新：

<!-- B.vue -->
<template>
  <div>I want to get element.length here：{{ elementLen }}</div>
</template>
<script>
export default {
  props: {
    elementLen: {
      type: Number,
      default: 0
    }
  }
}
</script>

情况2：A.vue是B.vue的子组件 #

在A里监听element数组变化，自动向父组件抛出最新长度即可，不需要手动触发：

1. A.vue里加深度监听，初始化和数组变化时都自动传值：

// A.vue 脚本部分补充watch
export default {
  data(){
    return{
      element: [
        { number: '11' },
        { number: '22' } 
      ]
    }
  },
  watch: {
    element: {
      handler(arr) {
        this.$emit('syncLen', arr.length)
      },
      immediate: true, // 组件挂载时立刻传初始值
      deep: true // 数组新增/删除元素、内部值变化都能触发更新
    }
  }
}

2. B.vue里引入A组件时监听自定义事件，把收到的值存到本地使用即可。

场景2：两个组件是兄弟组件/跨多层级无直接关联 #

• 小型项目可以用全局事件总线：在Vue实例原型挂载全局事件对象，A组件监听element变化时自动发送长度值，B组件在挂载时监听对应事件接收值即可，记得组件销毁前移除监听避免内存泄漏。
• 中大型项目直接用全局状态管理：Vue2项目用Vuex、Vue3项目用Pinia，把element数组存在全局Store中，两个组件都可以直接读取element.length，数据全程响应式同步，不需要写额外的传值逻辑。
• 多层嵌套的组件树可以用依赖注入（provide/inject）：在顶层组件提供响应式的element引用，深层的B组件注入后直接取长度使用即可。

提示：你贴出的原始A.vue代码存在两处语法错误，一是number后的冒号用了中文全角符号，二是数组内两个对象之间缺少逗号分隔，直接运行会报错，调试前记得先修正。

内容的提问来源于stack exchange，提问作者Chaoyi Ying