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)

                }

        }

    }

  • 相关阅读:
    bzoj2004(矩阵快速幂,状压DP)
    bzoj1242(弦图判定)
    uva1659(最大费用循环流)
    bzoj1009
    bzoj2893(费用流)
    bzoj4873(最大权闭合子图)
    bzoj2879(动态加边费用流)
    51nod 1239 欧拉筛模板
    poj2774 sa模版
    洛谷3391文艺平衡树
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11696801.html
Copyright © 2011-2022 走看看