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

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

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

子组件：函数

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

父组件：this

<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）spa