Vue子向父传值

一、要点概述

子组件：通过某种事件（这里是@click点击事件，也可以是其他事件）发送数据，this.$emit('事件名',要传的数据)

父组件：在标签内部@子组件中定义的事件名，等于一个函数（这里是rev），通过rev（val）这个函数接收数据，把val赋值给自己的数据

二、分步讲解

1. 初始化Vue实例，可以理解为父组件，在父组件中的data中初始化一个变量（parentmsg），用来接收值；

let vm = new Vue({
    el: '#app',
    data: {
        parentmsg:''
    }
});

2. 自定义子组件，命名为Child，这个名字可以随意起，template里直接给一个id名，可以直接在html中写组件的内容，不再需要使用模板字符串写模板了，既方便又快捷;

在子组件的data函数里声明一个变量（childmsg）；

在子组件中写一个点击事件@click="send（）"，send函数内部通过this.$emitthis.$emit（'childsend',this.childmsg）向父组件发送数据；this.$emit的第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值；第二个参数为要传给父组件的数据；

Vue.component('Child',{
    template:'#tp',
    data() {
        return {
            childmsg:'这是子组件中的数据'
        }
    },
    methods: {
        send() {
            // 第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值
            // 第二个参数为要传给父组件的数据
            this.$emit('childsend',this.childmsg)
        }
    }
})

3. 在父组件中，通过@子组件中定义的事件名，触发一个函数rev（val）来接收数据，把接收到的val值赋给自己的变量parentmsg，然后就可以在html中使用插值表达式或v-bind绑定属性值来使用子组件发送的数据了。

    
    
{{parentmsg}}


methods: {
    // 父组件接收数据的函数
    rev(val) {
        // val就是子组件发送的数据
        this.parentmsg = val
    }
}

三、总代码和运行结果

    
    
    
    


     
    

        
        
{{parentmsg}}
    
    
    
    
    

点击之后父组件才能访问子组件中的数据