如何将函数传递给Vue中的子组件？答案

【问题标题】：how to pass a function down to child component in Vue?如何将函数传递给Vue中的子组件？
【发布时间】：2021-06-11 17:26:45
【问题描述】：

我有一个关于如何将函数传递给孙子组件的新手 Vue 问题。在这种情况下，Vuex 是矫枉过正的，发出事件看起来并不比函数传入语法好。

祖父组件：

 <b-tabs card v-model="tabIndex" active-nav-item-class="nav-active">
          <b-tab title="Tổng quan">
            <LazyDataLeagueGeneral
              @changeLoadingBar="changeLoadingBar"                 
            />
           
          </b-tab>
          <b-tab title="Lịch thi đấu"><p>I'm the second tab</p></b-tab>
          <b-tab title="Thống kê cầu thủ"><p>I'm the second tab</p></b-tab>
</b-tabs>

有方法

changeLoadingBar(status) {
      this.loadingBar = status;
      console.log(status);
    },

在General组件上，它有另一个子组件调用TeamStandings并再次传递changeLoadingBar

<LazyDataLeagueTeamStandings
        :changeLoadingBar="changeLoadingBar"           
      />

props: {
    changeLoadingBar: Function
}

TeamStandings（孙子）：

props: {
        changeLoadingBar: Function
    }

我尝试调用 changeLoadingBar 但得到 TypeError: this.changeLoadingBar is not a function

mounted() {
    console.log("progress mounted");
    this.changeLoadingBar(false);
  },

更新：在祖父母我忘记将道具传递给孩子

<LazyDataLeagueGeneral
                  @changeLoadingBar="changeLoadingBar"    
                  :changeLoadingBar="changeLoadingBar"             
                />

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

试试这个。

props: {
    changeLoadingBar: {
      type: Function,
      required: true, //true or false
      default: () => { this.myMethod() },
    },
  },
  methods: {
    myMethod() {
      alert("I'm Ok!");
    }
  }

【讨论】：

该方法在祖父组件上。我想要一个孙子调用祖父母方法，因为 loadingBar 位于祖父母身上。
传递数据两次，将孙子数据发送给祖父母
谢谢，但是在深度嵌套的组件上发出事件语法看起来不太好。我在帖子中找到了两种方法。

【解决方案2】：

更新：在祖父母我忘记将道具传递给孩子

<LazyDataLeagueGeneral
                  @changeLoadingBar="changeLoadingBar"    
                  :changeLoadingBar="changeLoadingBar"             
                />

直接从 grandChild 调用 changeLoadingBar：this.changeLoadingBar(false);

另一种方法是仅使用提供/注入（将使间接调用 changeLoadingbar 函数）

祖父组件：

provide() {
    return {
      callChangeLoadingBar: this.changeLoadingBar,
    };
  },

关于孙子组件 TeamStanding：

inject:[
    'callChangeLoadingBar'
  ],

然后间接调用changeLoadingBar：this.callChangeLoadingBar(false)

【讨论】：

【解决方案3】：

像这样传递函数道具很快就会变得非常混乱，尤其是对于多个 n 级子/孙/...组件。在您的示例中，子组件基本上只是将函数代理给孙子，所有这些都只是冗余代码。

这个用例通常非常适合商店 (Vuex) 或类似 eventHub 模式的东西。由于您将 Vuex 视为矫枉过正，因此我强烈建议您研究 eventHub 模式。在 Vue 2 中，您可以直接实现此模式，或者在 Vue 3 中使用 recommended 来使用像 mitt 这样的第三方库。这些库很小，例如mitt 实际上是 200 字节的 gzip。

使用这种模式，您的示例案例实现起来很简单，并且可以说更简洁。

【讨论】：