[英]VueJS child to parent boolean value for hide component
Hi all and thank for helping:)大家好,感谢您的帮助:)
Context: In my child i want pass a boolean to the parent for hidden a component in the parent if user clicked上下文:在我的孩子中,如果用户单击,我想将 boolean 传递给父级,以便在父级中隐藏一个组件
in my child component ( name: connexionDesktop ):在我的子组件(名称:connexionDesktop )中:
<button v-on:click="$emit(childMessage)"> Start </button>
data () {
return {
childMessage: true
}
}
in the parent i try:在父母我尝试:
<connexionDesktop v-if="fromChild == false " v-on:childToParent="childMessage"> </connexionDesktop>
data () {
fromChild:false
}
methods: {
childMessage (value) {
alert('from child' + value );
this.fromChild = value
}
}
but that's not working... i think i am a noob:D i can't send a message from child to parent ^^""但这不起作用...我想我是个菜鸟:我无法从孩子向父母发送消息^^“”
can you help me?你能帮助我吗? thank a lot
非常感谢
As it's stated in the docs on $emit here , the first parameter is the custom event name.正如$emit here 的文档中所述,第一个参数是自定义事件名称。
You can do something like this:你可以这样做:
<button v-on:click="$parent.$emit('childToParent', childMessage)"> Start </button>
data () {
return {
childMessage: true
}
}
and in the parent:在父母中:
<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
}
}
...
The first argument for the $emit
method should be the event name. $emit
方法的第一个参数应该是事件名称。 So your code should look better like this:所以你的代码应该看起来像这样更好:
// 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>
Then in the parent component, you listen for the event and pass in the value the child emitted to a local value of the parent like so:然后在父组件中,您侦听事件并将子发出的值传递给父组件的本地值,如下所示:
<template>
<connexionDesktop v-if="fromChild == false" @update:parent="fromChild = $event">
</connexionDesktop>
</template>
<script>
export default {
data () {
return {
fromChild: false
}
},
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.