vue js 一个界面调另一个界面的变量和方法_vue调用另一个vue的变量和方法-优快云博客

本文链接：https://blog.youkuaiyun.com/wangzhufei/article/details/107318811

本文详细介绍了在Vue.js中如何通过props进行组件间的数据传递与共享，具体展示了A界面如何定义并暴露循环时间列表数据，以及B界面如何引用这些数据并显示相应的时间名称。同时，文章还提供了具体的代码示例，帮助读者更好地理解Vue组件通信的实践。

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

A界面的变量和定义（要用到props来对外）

loopTimeList: this.propLoopTimeList, // 用当前界面使用的







data() {
  return {
    timeList:[
      {id: 1, value: '0 */1 * * * *', name: '每1分钟' },
      {id: 5, value: '0 */5 * * * *', name: '每5分钟' },
      {id: 10, value: '0 */10 * * * *', name: '每10分钟' },
    ],
  }
},
// 用来做对外使用的
props: {
  propLoopTimeList: {
    type: Array,
    default: function() {
      return [
        {id: 1, value: '0 */1 * * * *', name: '每1分钟' },
        {id: 5, value: '0 */5 * * * *', name: '每5分钟' },
        {id: 10, value: '0 */10 * * * *', name: '每10分钟' },
      ]
    }
  }
},
methods: {
    // 显示url名字
    propsShowTimeName(id) {
        for (let obj of A.data().timeList) {
            if (obj && obj.id === id) {
                return obj.name
            }
        }
        return  '未找到:'+id
    }
  },

B界面的使用A界面的变量

import A from './Afile' // A界面的位置和 A界面的别名

// 方法实现
methods: {
getName(row) {
let v = A.props.propLoopTimeList.default().filter(e => e.value === row.cronTimeStr)
let str =  '循环发送('
if (v.length > 0) {
  return str + v[0].name +  ')'
}
return str + '未定义-' + row.cronTimeStr + ')'
},

B界面使用A界面的方法

import A from './Afile' // A界面的位置和 A界面的别名

A.methods.propsShowTimeName(1)