vue传参子传父

vue子传父用$emit实现

1.文件目录结构

 

 

 

2.parent父组件内容

<template>
    <div class="wrap">
        <div>我是Father组件</div>
        <children @func="speak" ></children>
        <div>{{msg}}</div>
    </div>
</template>

<script>
    import children from './children.vue'
    export default {
        name: "Father",
        data(){
          return{
             msg:''
          }
        },
        methods:{
           speak(msg){
               this.msg = msg;
               console.log(msg);//我是子组件发送的消息！
           }
        },
        components:{
            children
        }
    }
</script>

 

3.children子组件内容

<template>
    <div>
        <div>我是Son组件</div>
    </div>
</template>

<script>
    export default {
        name: "children",
        mounted() {
            this.$emit('func',"我是子组件发送的消息！");
        }
    }
</script>

 

4.展示到浏览器