超级简单vue子组件传值给父组件

子组件

<template>
    <div v-bind:class="['wrap']">
      <div>{{myName}}</div>
      <div>床前明月光</div>
      <div @click="sendMsgToFatherFn">找爸爸</div>
    </div>
</template>
<script>
export default {
  name: 'Text-Group',
  // props:['myName'],
  props:{
    myName:String,
  },
  methods:{
    sendMsgToFatherFn(){
      this.$emit('fatherFn', '爸爸我爱你')
    }
  }
}
</script>
<style>
.wrap{
  color:blue;
}
</style>

父组件

<template>
    <div id="app">
      <input type='text' v-model="inputValue" />
      <!-- 引入组件 -->
      <TextGroup :myName="myName" @fatherFn='fromMySonFn' ></TextGroup>
    </div>
</template>

<script>
  import TextGroup from './components/Text-Group'
  export default {
    el:'#app',
    data(){
      return{
      inputValue: '',
      listData: [],
      isDone:'',
      myName:'我要找儿子'
      }
    },
    components:{
      TextGroup,
    },
    methods:{
      fromMySonFn(data){
        console.log(data)
      }
    }
  }
</script>

步骤

image.png
image.png