zoukankan      html  css  js  c++  java
  • vue子组件如何向父组件传值

    子组件:

    <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)

                }

        }

    }

  • 相关阅读:
    Codeforces Round #437 (Div. 2, based on MemSQL Start[c]UP 3.0
    Codeforces 294C 组合数学
    Educational Codeforces Round 40 (Rated for Div. 2)
    第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛
    天梯赛和蓝桥杯省赛训练
    莫队算法
    牛客练习赛13
    51NOD-1391 预处理dp
    AtCoder Regular Contest 092
    大二下学期赛季
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11696801.html
Copyright © 2011-2022 走看看