javascript - 将数据从子输入元素传递给vue中的父元素
问题描述
我想
使用$emit
方法
将数据从子组件的输入元素传输到
父组件数据
属性v-bind
<input v-model="userinput" />
runtime-core.esm-bundler.js?5c40:6870 [Vue warn]: Extraneous non-emits event listeners (transmitData) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
at <UserInput onTransmitData=fn<bound receaveData> >
at <App>
进行这种操作的正确方法是什么?
\\ child
<template>
<input v-model="userinput" />
<button type="button" @click="transmitData">transmit</button>
</template>
<script>
export default {
data() {
return {
userinput: " dd",
}
},
methods: {
transmitData(event){
this.$emit('transmit-data', this.userinput)
}
}
}
</script>
\\ parent
<template>
<user-input @transmit-data="receaveData" />
<p>{{ childData }}</p>
</template>
<script>
import UserInput from "./components/UserInput.vue";
export default {
name: "App",
components: {
UserInput,
},
data() {
return {
childData: " "
};
},
methods: {
receaveData(compTransmit){
console.log(compTransmit)
this.childData = compTransmit
},
},
};
</script>
解决方案
您必须在子组件 文档中指定一个 emits选项
所以在你的情况下应该是这样的
export default {
emits: ['transmit-data'], // you need to add this :)
data() {
return { userinput: " dd" }
},
methods: {
transmitData(event){
this.$emit('transmit-data', this.userinput)
}
}
}
推荐阅读
- javascript - 未捕获的类型错误:无法读取未定义的属性“getParent”
- angular - Angular 9 - NativeScript - 目标入口点“side-drawer-directives”缺少依赖项:- ./
- maven - maven-shade-plugin "minimizeJar" 配置有什么作用?
- c# - 有没有办法在 Windows 10 设备上以编程方式启用/禁用(灰色)操作中心中的旋转锁定,而无需重新启动?
- c++ - 是否可以在 C++ 中获取函数的参数的默认值?
- docker - 如何减少 CentOS 7 的 docker 镜像大小?
- mysql - SQL - 使用 SQL 从 post_content 中删除起始 html 元素
- c# - 将 Json 键转换为小写
- java - SAPUI5 servlet 调用 pdf
- javascript - Firebase 注册 - 异步功能不起作用