VueJS child 到 parent 隐藏组件的布尔值

Question

大家好，感谢您的帮助:)

上下文： 在我的 child 中，如果用户单击

，我想将一个布尔值传递给 parent，以便在 parent 中隐藏一个组件

在我的 child 组件中（名称：connexionDesktop）：

<button v-on:click="$emit(childMessage)"> Start </button>

data () {
  return { 
    childMessage: true
  }
}

在 parent 我尝试：

<connexionDesktop v-if="fromChild == false " v-on:childToParent="childMessage"> </connexionDesktop>


data () {
    fromChild:false
}


methods: {
    childMessage (value) {
       alert('from child' + value );
       this.fromChild = value
    }
}

但这行不通...我想我是菜鸟:D 我无法从 child 向 parent 发送消息 ^^"""

你能帮帮我吗？非常感谢

Answer 1

如the docs on $emit here中所述，第一个参数是自定义事件名称。

你可以这样做：

<button v-on:click="$parent.$emit('childToParent', childMessage)"> Start </button>

data () {
  return { 
    childMessage: true
  }
}

在父级中：

<connexionDesktop v-if="fromChild == false " v-on:child-to-parent="childMessage"> </connexionDesktop>

...

data () {
    fromChild:false
}


methods: {
    childMessage (value) {
        alert('from child' + value );
        this.fromChild = value
    }
}

...

Answer 2

$emit 方法的第一个参数应该是事件名称。所以你的代码看起来应该像这样更好：

// child component
<template>
 <button v-on:click="handleClick"> Start </button>
</template>

<script>
export default {
   data () {
     return { 
      childMessage: true
     }
   },
   methods: {
    handleClick() {
      this.$emit('update:parent', this.childMessage)
    }
  }
}


</script>

然后在父组件中，监听事件并将子组件发出的值传递给父组件的本地值，如下所示：

<template>
   <connexionDesktop v-if="fromChild == false" @update:parent="fromChild = $event"> 
   </connexionDesktop>
</template>

<script>
export default {
   data () {
    return {
     fromChild: false
    }
   },
}
</script>

VueJS child 到 parent 隐藏组件的布尔值

VueJS child to parent boolean value for hide component

javascript

parent-child

vuejs2