Vue 2.0 - 孩子与父母沟通答案

【问题标题】：Vue 2.0 - Child Communicate to ParentVue 2.0 - 孩子与父母沟通
【发布时间】：2018-11-12 17:20:57
【问题描述】：

我似乎无法让父母对孩子的排放采取行动。这是我的代码：

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 值

【问题讨论】：

我认为你应该在@mouseover="selected = idx; closeSibling(idx)" 中使用; 而不是,
用@而不是用：钉发射：
汉密尔顿，父母没有回应'@'只有'：'
@FrancisMazanet 提供的代码是在父组件中还是在子组件之一中？

标签： vue.js vuejs2

【解决方案1】：

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

以下是重点：

  data() {
    return {
      idx: undefined
   },
   methods: {
     closeSibling: function(idx) {
        console.log("I am emitting" + idx)
        this.$emit('closeMySibling', this.idx = idx)
    },
    closeMyChild: function() {
        console.log('closing my child' + this.idx)
     }

【讨论】：