主页 / 问题 / 1384896
Accepted
Moonwolf45
Asked:2022-07-22 23:47:58 +0000 UTC2022-07-22 23:47:58 +0000 UTC

VueJS从父级调用子方法

  • 772

一般来说，vueJs上有一个项目，我正在尝试从父级调用子组件的方法，但是有些事情没有解决。这是父组件中的内容：

<modalWindow :dialog="openFilter" :maxWidth="'720px'">
  <filterComponent ref="filterData" @callUpdateChartAndDataGrid="updateChartAndDataGrid" @callCloseModal="closeModal"></filterComponent>
</modalWindow>

<script>
    import ModalWindow from '@/components/Other/ModalComponent';
    import FilterComponent from '@/components/Other/FilterComponent';

...
onFilter () {
  this.openFilter = !this.openFilter;

  this.$refs.filterData.checkAllBills()
  this.$refs.filterData.checkAllCategories()
  this.$refs.filterData.checkAllCurrencies()
  this.$refs.filterData.checkAllTypes()
},
...

嗯，在孩子身上肯定有这样的方法，但是我得到以下错误：

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading 'checkAllBills')

请帮忙。

javascript

1 个回答

  1. Best Answer

    总的来说，我坐下来思考并决定这样做，因为我仍然只会运行一次功能，在第一次出现时，我决定这样做：

    <modalWindow :dialog="openFilter" :maxWidth="'720px'">
  <FilterComponent :billsParent="bills" :categoriesParent="categories" :currenciesParent="currencies"
    :typesParent="types" @callUpdateChartAndDataGrid="updateChartAndDataGrid" @callCloseModal="closeModal" />
</modalWindow>
...
onFilter () {
  this.openFilter = !this.openFilter;

  if (this.bills.length === 0) {
    this.profile.forEach((item) => {
      this.bills.push(item.id)
    })
  }

  if (this.categories.length === 0) {
    this.category.forEach((item) => {
      this.categories.push(item.id)
    })
  }

  if (this.currencies.length === 0) {
    this.currenciesUser.forEach((item) => {
      this.currencies.push(item.CharCode)
    })
  }

  if (this.types.length === 0) {
    this.arrTypes.forEach((item) => {
      this.types.push(item.id)
    })
  }
},

    粗略地说，我在打开过滤器时在父组件中声明了相同的参数，我将它们填充并在mounted方法中将它们传递给过滤器，我将它们应用于子组件的参数。

    • 0

相关问题