Vue组件通信中的$emit 子传父数据

子传父

子组件里 通过$emit('自定义事件名',变量1,变量2)触发 事件

父组件@自定义事件名='事件名'监听事件

触发事件后, 通过$emit来触发 父组件 绑定在子组件标签上的 自定义事件

参数1: 要触发的事件

参数2: 要传递的值

子组件方法里 this.$emit('sendfather',val1,val2)触发自定义事件

父组件里<child @wyf="getMsgFromSon"></child>

---

1.先在子组件中有一个数据

let one  ={
            template:`#one`,
            data(){
                return {
                    mes:'数据发送父组件',
                }
            }
        }

2.在子组件的视图层写上一个按钮，并添加一个点击方法：

<template id="one">
        <div>
            <h1>我是子组件one</h1>
            <button @click="add()">发送数据给父组件</button>
        </div>
    </template>

 methods:{
                add(){
                    // 这里前面的名字是自定义的，代表发送数据
                    // 后面的是要发送的数据
                    this.$emit('getmes',this.mes)
                //只要这个事件触发了，数据就被发送出去了
                }
            }

3.在父组件中写上一个方法，并在根组件的视图层上使用子组件的地方绑定这个方法：

data:{
                message:''
            }, 
methods:{
                // 此时这个data就是发送过来的子组件的数据
                setmes(data){
                    //把数据赋值自己数据中心的message
                    this.message = data;
                    console.log(this.message);  
                }

<!-- 绑定这个自定义的名字为父组件的方法 -->
        <one @getmes="setmes"></one>

在根组件渲染这个数据，当点击按钮时：