vue子元件向傳父元件傳值

子元件：

<template>
  <div class="app">
   <input @click="sendMsg" type="button" value="給父元件傳遞值">
  </div>
</template>
<script>
export default {

  data () {
    return {
            //將msg傳遞給父元件
     msg: "我是子元件的msg",
    }
  },
     methods:{
         sendMsg(){
             //func: 是父元件指定的傳資料繫結的函式，this.msg:子元件給父元件傳遞的資料
             this.$emit('func',this.msg)
         }
     }
}
</script>
 

子元件通過this.$emit()的方式將值傳遞給父元件

注意：這裡的func是父元件中繫結的函式名

父元件：

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>
 

來源：oschina

連結：https://my.oschina.net/u/4407946/blog/3478299