子组件:
<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>