接着vue组件父与子通信详解继续学习。本文主要为大家详细介绍了vue组件间通信子与父的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
二、组件间通信（子组件传值给父组件）
通过事件的方式来完成数据的传输。
①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
methods:{
recvmsg:function(msg){
//参数msg就是子组件通过事件出来的数据
}
}
②绑定事件处理函数
事件一般情况 都是自定义事件
<child-component @myevent="recvmsg"></child-component>
③在子组件触发事件
事件名，值
this.$emit('myevent',myphone)
//触发一个叫做myevent的事件，同时把第二个参数数据传递给事件对应的处理函数
总结：
在vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>组件间通信子传父</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</p>
<script>
//通过事件的方式传递
// 绑定 -- 触发
vue.component("parent-component",{
data:function(){
return {
sonmsg:""
}
},
methods:{
//msg参数要拿子传递的值
recvmsg:function(msg){
console.log("父组件接收到子组件的数据"+msg);
this.sonmsg = msg;
}
},
template:`
<p>
<h1>这是父组件</h1>
<p>子组件传来的数据为：{{sonmsg}}</p>
<hr/>
<child-component @customevent="recvmsg"></child-component>
</p>
`
})
vue.component("child-component",{
methods:{
sendmsg:function(){
//来触发绑定给子组件的自定义方法
//this.$emit("customevent");第一个参数触发
//this.$emit("customevent");第二个参数传值
this.$emit("customevent","哈哈哈哈");
},
},
template:`
<p>
<h1>这是子组件</h1>
<button @click="sendmsg">sentofather</button>
</p>
`
})
new vue({
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
在子组件中放上一个input，点击按钮 把用户输入的内容发给父组件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子与父之间的通信</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</p>
<script>
//创建父组件
vue.component("parent-component",{
//data属性
data:function(){
return{
sonmsg:""
}
},
methods:{
recvmsg:function(msg){
this.sonmsg = msg
}
},
template:`
<p>
<h1>父组件</h1>
<h4>子组件传递的数据：{{sonmsg}}</h4>
<child-component @customevent="recvmsg"></child-component>
</p>
`
})
//创建子组件
vue.component("child-component",{
data:function(){
return {
myinput:""
}
},
methods:{
sendmsg:function(){
this.$emit("customevent",this.myinput);
}
},
template:`
<p>
<h1>子组件</h1>
<input type="text" v-model="myinput"/>
<button @click="sendmsg">发送</button>
</p>
`
})
new vue({
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
相关推荐：
详解vue组件父与子通信（一）
vue组件中v for指令介绍及使用v-for出现告警问题解析
vue组件中使用iframe元素的方法示例
以上就是实例详解vue组件间通信子与父详解（二）的详细内容。