Home / Questions / 105712
Accepted
Juan Pablo B
Asked: 2020-09-29 05:44:39 +0800 CST 2020-09-29 05:44:39 +0800 CST

VueJs 中组件之间的通信

  • 772

我在 /resources/assets/js/components 中有 2 个组件，第一个有：

 <template>
    <div class="inline">
              <button @click="getDataCategory(category)" :class="is_active == category.id ? 'btn-primary' : 'btn-default' " v-for='category in categories' class='btn btn-space'>{{category.name}}</button>     
    </div>
</template>

<script>
    import BaseUrlMixin from '../mixins/baseUrl.js'; 

    export default { 
        mixins: [BaseUrlMixin],           
        data(){
            return{
               id_tournament:null,
               categories:[],
               data_category: false, 
               is_active: false, 
               show_data: "",
            }
        },
        methods: {             
          getDataCategory: function(category){
              this.is_active = category.id;
              this.show_data = {
                  'category':category.name
              };
              this.data_category = true;
          }
        }, 
    }
</script>

这个想法是，当您单击按钮时，调用 getDataCategory() 并设置 this.show_data ，到目前为止它可以工作，现在我需要将 this.show_data 传递给以下另一个组件。我想使用在表单中看到的 if="show_data" 有值来显示表单。（我知道你可以把这个组件放在另一个里面，但是由于模板的结构我不能，我需要这种沟通。

<template>
    <div>
        <form @submit.prevent="store()" :if="show_data">
          <label for="">Cantidad de fechas</label>  
          <input type="text" v-model="date" onkeypress='return event.charCode >= 48 && event.charCode <= 57' min="1" max="50" required="">
          <button class='btn btn-primary btn-sm' >
              <i class="fa fa-floppy-o" aria-hidden="true"></i>
              Guardar
          </button>
        </form>
    </div>
</template>

<script>

    export default {
       data(){
            return{
               id_tournament:null,
               date:'',
            }
        },
        methods: {
        },
        mounted() {     

            this.getIdTournament();
        } 
    }
</script>
javascript

2 Answers

  1. Best Answer

    您可以创建一个“总线”来在它们之间没有父子关系的组件之间发送通信，基本上它是一个空的 Vue 实例：

    var bus = new Vue()

    然后你$emit从你想发送信息的地方做：

    // in component A's method
bus.$emit('id-selected', 1)

    这是您在所需组件中接收它的方式：

    // in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

    这一切都取自文档，尽管我也已经在实践中使用过它。

    • 2

  2. Vue 中组件之间最常见的两种通信方式是通过事件总线模式和状态管理模式。

    • 事件总线模式：正如 Shaz 所提到的，它基本上包括创建一个 Vue ( bus ) 实例，它允许不相关的组件相互通信。通信通过所述组件对总线的发布和订阅进行。
    • 状态管理模式：它包括为应用程序的所有组件创建一个集中存储。

    根据应用程序的复杂性，您必须选择最适合您的需求。通常，事件总线更多地用于独立组件之间的通信，这些组件不一定会改变应用程序的状态。

    随着应用程序开始增长，使用总线变得越来越难以维护，这就是状态管理模式变得有用的时候。推荐的是vuex，它由 Vue 的创建者 Evan 维护。

    • 1