[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件

2019-05-10

[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件

 

原理也很简单，子组件使用$emit来触发父组件的函数，子组件借助这个父组件的函数将数据传给父组件。

父组件中方法：

<template>
    <div>{{ChildData}}</div>
    <router-view @pushData="getChildData"></router-view>
</template>
<script>
export  default {
    data:function(){
        return{
            ChildData:"",//定义获取子组件的数据
        }
    },
    methods:{
        getChildData (data) {
            this.ChildData=data//想要获取子组件的数据，并赋值给自己的ChildData
        }
    }
}
</script>

 

子组件的数据，并且调用父组件函数来传值：

<template>
    <div @click="sendYourData">点我将数据传给父组件</div>
</template>
<script>
export  default {
    data:function(){
        return{
            YourData:"我是来自子组件的数据呢",
        }
    },
    methods:{
        sendYourData:function () {
            this.$emit('pushData',this.YourData)
        }
    }
}
</script>