Question

我似乎无法让父母代孩子的行为。这是我的代码：

HTML：

<ul>
    <!-- Tablet Parent -->
    <li :closeMySibling="closeMyChild">
        <div class="inner-category">
            <ul>
                <!-- Tablet Children / Desktop Parents  -->
                <li v-for="(r, idx) in routes"
                    @mouseover="selected = idx, closeSibling(idx)"></li>
            </ul>
        </div>
    </li>
</ul>

脚本：

   closeSibling: function(idx) {
      // message below is showing in console
     console.log("I am emitting " + idx)
     this.$emit('closeMySibling', idx)
    },
    closeChild: function() {
     // message below **IS NOT** showing in console
     console.log('closing my child')
     if (idx !==0){
       (this.$refs['menuItem0'][0]).classList.remove("active")                        
                    }         
    }

我试图保持这种简单；我删除了很多代码。基本上有4个孩子属于父母。将父级鼠标悬停在其上方时，第一个孩子的标头（索引为0）打开并显示信息。

当任何一个孩子被“遗忘”时，他们向父母发送事件，首先确定他们的索引并请求关闭他们的兄弟姐妹。

父级接收到该事件，并且只要请求关闭的子级不是索引0，父级就会关闭子级索引0。

孩子们正在正确地发射东西，但是父母们却没有捡起东西。

有人可以指出我的错误吗？

谢谢

更新：

已将父级更改为此=>：closeMySibling =“ closeMyChild（）”

将子级更改为此=> @ mouseover =“ selected = idx; closeSibling（idx）”

但是父母接听电话....

I am emitting 3
closing my child undefined
I am emitting 2
closing my child undefined
I am emitting 1
closing my child undefined
I am emitting 0
closing my child undefined

父母没有得到idx值

Answer 1

好的，我知道了。我需要定义一个idx数据属性。

以下是关键点：

Vue 2.0-孩子与父母沟通

1 个答案: