在调用者组件中访问组件参数

Question

我有一个组件，我在另一个组件中调用它：

组件 1

<template>
  <FiltersComponent />
</template>


export default Vue.extend({
 components: { FiltersComponent }

)}

所以，这个 FiltersComponents 有一些我想访问我的组件的参数

组件 2 数据

data() {
    return {
      TestList: [] as string[],
      Test2List: null as string[] | null,
    }
  },

如何访问 COMPONENT 1 中的 TestList 和 Test2List？

Answer 1

始终根据需要将状态存储在组件树中尽可能高的位置，这意味着如果您需要组件 1 中的这些列表，请将它们存储在那里。然后，您可以使用 props 和 events 来访问和更新组件 2 中的数据。

或者，您可以使用像 Vuex 这样的集中存储。

Answer 2

有多种可能性：如果一个组件是另一个组件的子组件或同级组件，您可能希望在 props (passing data down) and events (passing data up). Otherwise, if they are not siblings or children, you can use a store like vuex 进行循环。

要使用文档示例：

vue 入口点：（例如，app.js）：

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      someProperty: 'someValue'
    }
  },
  mutations: {
    update (state, value) {
      state.someProperty = value
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

在您的组件的 script 部分：

  this.$store.commit('update', 'YOUR_VALUE')

其他成分：

  const val = this.$store.state.someProperty

然而，这只是一个非常基本的例子。您绝对应该查看文档，尤其是有关 state, getters and mutations.

的部分

Answer 3

您可以使用 ref、

实现相同的效果

检查下面的例子

<template>
  <FiltersComponent ref="childComponent" /> <!-- Adding ref over here -->
</template>


export default Vue.extend({
 components: { FiltersComponent }

)}

然后在组件 1 中的任何方法或安装部分中。您可以访问组件 2 数据，例如

this.$refs.childComponent.TestList

或

this.$refs.childComponent.Test2List

是不是很简单？ ;)

在调用者组件中访问组件参数

Access component parameters inside caller component

vue.js

vue-component

vuejs2