美文网首页
vue---子组件给父组件传值

vue---子组件给父组件传值

作者: WXL_JIANSHU | 来源:发表于2019-09-29 10:02 被阅读0次

    子组件:

    <template>
        <div class="app">
           <input @click="sendMsg" type="button" value="给父组件传递值">
        </div>
    </template>
    <script>
    export default {
     
        data () {
            return {
                //将msg传递给父组件
                msg: "我是子组件的msg",
            }
        },
         methods:{
             sendMsg(){
                 //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
                 this.$emit('func',this.msg)
             }
         }
    }
    </script>
    

    子组件通过this.$emit()的方式将值传递给父组件

    注意:这里的func是父组件中绑定的函数名

    父组件:

    <template>
        <div class="app">
            <child @func="getMsgFormSon"></child>
        </div>
    </template>
    <script>
    import child from './child.vue'
    export default {
        data () {
            return {
                msgFormSon: "this is msg"
            }
        },
        components:{
            child,
        },
        methods:{
                getMsgFormSon(data){
                    this.msgFormSon = data
                    console.log(this.msgFormSon)
                }
        }
    }
    </script>
    

    相关文章

      网友评论

          本文标题:vue---子组件给父组件传值

          本文链接:https://www.haomeiwen.com/subject/uicnuctx.html