无法通过发射将数据从子组件传递给父组件 [英] Can't pass data from children to parent component with emit
本文介绍了无法通过发射将数据从子组件传递给父组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要将数据从子组件传递给父组件.代码很简单，但我不明白我遗漏了什么和在哪里.
出口默认{name: 'TableOfContent',props: ['itemGUID'],//是必要的吗?方法: {itemClick(itemGUID){控制台日志(itemGUID)；this.$emit('newchapter', itemGUID)//将 GUID 传递给父级}}}父模板:
<div class="Book" v-on:newchapter="foo(itemGUID)">{{味精}}</模板><脚本>从'./TableOfContent.vue'导入目录导出默认{名称:'我的书'，数据 () {返回 {msg: '我的主要书'}},方法:{foo(itemGUID){console.log("GUID 为:", itemGUID);}},组件:{toc}}
此代码不起作用:(
解决方案
只需在模板中执行以下操作:
<div class="Book" v-on:newchapter="foo">{{味精}}</模板>
I need to pass data from children to parent component. Code is very simple, but I can't understand what and where I am missing.
export default {
name: 'TableOfContent',
props: ['itemGUID'], // is it nessosary?
methods: {
itemClick(itemGUID)
{
console.log(itemGUID);
this.$emit('newchapter', itemGUID) // passing GUID to parent
}
}
}
Parent template:
<template>
<div class="Book" v-on:newchapter="foo(itemGUID)">
{{msg}}
</div>
</template>
<script>
import toc from './TableOfContent.vue'
export default {
name: 'mybook',
data () {
return {
msg: 'my main book'
}
},
methods:
{
foo(itemGUID)
{
console.log("GUID is: ", itemGUID);
}
},
components: {toc}
}
</script>
This code do not work :(
解决方案
Just do following in template:
<template>
<div class="Book" v-on:newchapter="foo">
{{msg}}
</div>
</template>
这篇关于无法通过发射将数据从子组件传递给父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
