子组件
<template>
<div>
子组件
<button @click="sendMsg">传递</button>
</div>
</template>
<script>
export default{
name:"child",
data(){
return{
msg:'我是子组件数据'
}
},
props:{
num:{
type:Number,
default:5
}
},
computed:{
addNum(){
return this.num * 5;
}
},
methods:{
sendMsg(event){
//两个参数:参数1:key 参数2:数据
this.$emit("sendmsg",msg)
//如果想从父组件获取再计算处理后返回父组件用以下方式
this.$emit("sendmsg",this.addNum)
}
}
}
</script>
在子组件中添加methods方法
this.$emit(“sendmsg”,msg)
两个参数:参数1:key 参数2:数据
在父组件中则是
<Child @sendmsg=“getMsg” "/>
之后再methods里将得到的值传递给当前组件
父组件
<template>
<div>
父组件
<input type="text" v-model="num">
<Child @sendmsg="getMsg" :num="getNum"/>
{{ info }}
</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>