$emit 子传参给父

Posted 2020-09-28

parent.vue

<template>
　<div class="wapper">
<p>child tells me:{{childWord}}</p>
     <child v-on:child-tell-me-something="listenToMyBoy"></child>
</div>
</template>

 <script>
import child from ‘../components/child‘
 export default {
  name:‘wapper‘,
  components:{child},
  data(){
      return{
          childWord:‘‘
      }
  },
  methods:{
      listenToMyBoy(msg){
       this.childWord=msg
      }
  }
 }
 </script>

child.vue

 <template>
 <div>
    <div @click="up">点我open mouse!

    </div>
   
    </div>
</template>

<script>
  export default{
    data(){
      return {
        msg: ‘hello from components a‘


      }
    },
 
    methods: {
     up() {
     
       this.$emit(‘child-tell-me-something‘,this.msg)
    }
    }
  }
</script>