javascript - 从 Vue 中的自定义事件获取事件源？

Question

我正在构建一个由未指定数量的子组件组成的 Vue 组件。始终只有一个子组件可见，并且用户只能在当前可见的子组件发出 is-valid 事件时在子组件之间切换。

我想保持这种解耦，这样 child 就不知道他们的 parent ，只能通过发出事件进行交流。这也意味着子级不知道他们在父级组件中的位置。

因此，父组件必须以某种方式跟踪事件来自哪个子组件。如果事件来自正确的 child (当前可见的那个)，则会激活一些按钮，允许用户转到下一个或上一个 child 。

到目前为止，这是我的代码:

HTML

<div id="app">
    <template id="m-child">
        <div>
            <button v-on:click="setstate(true)">Valid</button>
            <button v-on:click="setstate(false)">Invalid</button>
        </div>
    </template>

    <template id="m-parent">
        <div>
            <m-child v-on:newstate="newchildstate"></m-child>
            <m-child v-on:newstate="newchildstate"></m-child>
            <m-child v-on:newstate="newchildstate"></m-child>
        </div>
    </template>

    <m-parent></m-parent>
</div>

JS

Vue.component('m-child', {
    template: '#m-child',
    data: function() {
        return {};
    },
    methods: {
        setstate: function (valid) {
            this.$emit('newstate', valid);
        }
    }
});

Vue.component('m-parent', {
    template: '#m-parent',
    methods: {
        newchildstate: function (valid) {
            console.log('valid:' + valid + ', but where from?');
        }
    }
});

new Vue({
    el: '#app'
});

当然我可以在子事件绑定(bind)上硬编码一个索引:

        <m-child v-on:newstate="newchildstate(0, $event)"></m-child>
        <m-child v-on:newstate="newchildstate(1, $event)"></m-child>
        <m-child v-on:newstate="newchildstate(2, $event)"></m-child>

但这会使整个设置的模块化程度降低很多，我只想能够在 DOM 中插入一些子项并使其立即运行。

我查看了 Vue 事件的 API，似乎没有办法从事件对象中获取源。

Answer 1

这取决于你想接收什么，我个人的偏好是传入一个prop来设置一个唯一的id，然后在$emit中传回:

<m-child v-on:newstate="newchildstate" :id="1"></m-child>
<m-child v-on:newstate="newchildstate" :id="2"></m-child>
<m-child v-on:newstate="newchildstate" :id="3"></m-child>

然后在您的子组件中，您可以发出一个状态为id的对象:

child :

this.$emit('newstate', {id: this.id, state: valid});

父级:

newchildstate: function (valid) {
  console.log('valid:' + valid.state + ', from' + valid.id);
}

我意识到这看起来与您的硬编码示例并没有太大不同，但在某些时候您的父级会想要处理事件，所以您可以在 data 中使用初始状态设置一个数组，然后使用 v-for:

data: {
  children: [true, false, false] // setup states
}

然后你会做:

<div v-for="(state, index) in states">
  <m-child v-on:newstate="newchildstate" :id="index"></m-child>
</div>

在你的 View 模型中:

  methods: {
    newchildstate: function(valid) {
      this.$set(this.states, valid.id, valid.state);
    }
  }

这是一个 JSFiddle，它通过 prop 动态启动数组并设置子组件:https://jsfiddle.net/2y9727e2/