将数据从子输入元素传递到 vue 中的父元素

Question

我想将数据从子组件的输入元素传输到父组件数据属性
使用 $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>

Answer 1

你必须在子组件中指定一个 emits 选项 docs

所以在你的情况下应该是这样的

export default {
emits: ['transmit-data'], // you need to add this :)
data() {
    return { userinput: " dd" }
},
methods: {
    transmitData(event){
        this.$emit('transmit-data', this.userinput)
    }
}
}

将数据从子输入元素传递到 vue 中的父元素

pass data from child input element to parent in vue

javascript

data-binding

vue.js

vue-component

vue-reactivity