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

                }

        }

    }

  • 相关阅读:
    2019年CSP-J初赛试题(普及组)试题详解
    开放课件
    猴子选大王 (约瑟夫问题)
    后缀表达式转中缀表达式
    JDBC的使用
    JDBC
    MySQL第五天
    MySQL第四天
    MySQL第三天
    MySQL第二天
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11696801.html
Copyright © 2020-2023  润新知