Question

我对Vue.js很新。事实上，我今天刚开始。

我有一个问题。

假设我在dom的某个桌子上有按钮。

<table>
   <tr><td><button v-on:click="showModal">Show</button>
</table>

现在我有一个超出按钮范围的模态框。

此按钮位于其自身的组件内部，模态框也有自己的组件。

我正在使用此按钮传入ID，我想要做的是：

点击按钮
显示在模态中获取的记录，然后最终对其执行一些操作

我的问题是我无法通过此按钮的click事件触发Modal组件中的方法（执行http请求并获取和呈现数据）。

按钮和模态没有关系，它们不是父/子。

Answer 1

在模态组件触发方法中，按组件就绪状态获取数据：

$data[] = array('type' => $type, 'latitude' => $latit, 'longitude' => $longit, 'date' => $dateTime);

您可以使用另一个生命周期钩子：

https://vuejs.org/guide/instance.html#Lifecycle-Diagram

Answer 2

一个选项是在两个组件的共同祖先中添加事件广播。

像这样：

var main = new Vue({
    el: 'body',
    components: {
        zmodal : zmodal,
        showhidebtn : showhidebtn,
    },
    methods: {
        showModal: function (currentId) {
            this.$broadcast('openModalBox', currentId);
        }
      }
 });

在＆＃; zmodal＆＃39;中添加一个事件监听器并在＆＃39; showhidebtn＆＃39;的点击事件中调用此函数showModal成分

它正在运行，但现在我在组件外部有一组代码，必须触发才能使其正常工作。

我想知道是否有更好的方法来做到这一点。

单击组件外部的按钮，打开模式并从服务器获取数据

2 个答案: