我想把資料從子程式的輸入元素傳送到父程式的資料屬性中去。
我想把子程式的輸入元素的資料傳送到父程式的資料屬性中。
使用$emit方法，資料可以被傳輸到父級
直接將傳輸的屬性系結到子屬性上
使用v-bind <input v-model="userinput" />
結果是一個警告
runtime-core.esm-系結。 js?5c40:6870 [Vue warn]。外來的非emits事件監聽器（transmitData）被傳遞給組件，但不能自動繼承，因為組件渲染片段或文本根節點。如果監聽器只想成為組件的自定義事件監聽器，請使用"emits"選項宣告它。
在 <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"/span>,
}
},
methods: {
transmitData（event）{
this.$emit(' transmit-data', this.userinput)
}
}
</script>
parent
<模板>
<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>
uj5u.com熱心網友回復：
你必須在子組件中指定一個emissions option。 docs
因此，在你的案例中，應該是這樣的
export default {
emits: ['transmit-data'], // You need to add this :)
data（）{
return { userinput: " dd"/span> }
},
methods: {
transmitData（event）{
this.$emit(' transmit-data', this.userinput)
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310043.html
標籤：