父子组件通信

Posted 2021-02-16 rangewr

子组件:

<template><div>子组件<button @click="sendMsg">传递</button></div>

</template>

<script>

export default{

      name:"child",

      data(){return{msg:‘我是子组件数据‘}},

      props:{ num:{    //接收父组件传递过来的参数num

                    type:Number,

                    default:5

             }

      },

      computed:{ addNum(){return this.num * 5; }},

      methods:{ sendMsg(event){

                    //两个参数：参数1：key  参数2：数据

                    this.$emit("sendmsg",this.addNum) }}} 

</script>

 

父组件:

<template><div>父组件<input type="text" v-model="num">

             <Child @sendmsg="getMsg" :num="getNum"/>{{ info }}

             //@sendmsg是接收子组件参数,:num是给子组件传参

      </div></template>

<script>

import Child from "./child"

export default{

      name:"parent",

      data(){return{info:"", num:5}},

      computed:{ getNum(){return this.num - 0; }},

      components:{ Child},

      methods:{ getMsg(data){ this.info = data; }}

}   

</script>