Vue 父子组件传值 之 子组件向父组件传值

所谓的子组件向父组件传值，实际上用的是事件映射，事件映射其实相当于自定义了一个事件 第一个参数是自定义(映射)事件的名称 第二个参数是要携带的参数

    在子组件中，首先需要使用$emit方法，该方法接收2个参数，第一个参数是事件的名称，自己随意定义。第二个参数是需要传递的数据，可以是对象，也可以是字符串类型。$emit是VUE实例中的一个方法，所以前面要加上this，可以在钩子函数中执行，也可以由某个事件触发执行。

子组件：

<template>
<!-- 这是子组件 -->
    <div>
        <button @click="fun">点击</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            title:'已经把子组件的值传给父组件了'
        }
    },
    methods: {
        fun(){
            this.$emit('change',this.title)
        }
    }
}
</script>

父组件：

<template>
<!-- 这是父组件 -->
    <div>
        {{tit}}
        <!-- 事件映射在那个组件中定义就在当前组件定义的元素上监听该事件的触发 
            this.$emit('change',this.title)
                子组件定义的什么事件名称，这里就写什么  用来监听变化
        -->
        <childr @change="changeTitle"></childr>  
    </div>
</template>
<script>
import childr from '@/components/childr' //把子组件引入
export default {
    data(){
        return{
            tit:"演示子组件向父组件传值"
        }
    },
    components: {
        childr  //注册子组件
    },
    methods: {
        changeTitle(data){  //这里的data用来接受子组件传递过来的参数（就是子组件中this.title）
            this.tit = data
        }
    }
}
</script>

效果：（通过$emit(),将子组件中的title传给父组件中的tit）