vue组件间通信子与父详解（二）
编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>
<div id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</div>
<script>
//通过事件的方式传递
// 绑定 -- 触发
Vue.component("parent-component",{
data:function(){
return {
sonMsg:""
}
},
methods:{
//msg参数要拿子传递的值
recvMsg:function(msg){
console.log("父组件接收到子组件的数据"+msg);
this.sonMsg = msg;
}
},
template:`
<div>
<h1>这是父组件</h1>
<p>子组件传来的数据为：{{sonMsg}}</p>
<hr/>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
Vue.component("child-component",{
methods:{
sendMsg:function(){
//来触发绑定给子组件的自定义方法
//this.$emit("customEvent");第一个参数触发
//this.$emit("customEvent");第二个参数传值
this.$emit("customEvent","哈哈哈哈");
},
},
template:`
<div>
<h1>这是子组件</h1>
<button @click="sendMsg">senToFather</button>
</div>
`
})
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>
<div id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</div>
<script>
//创建父组件
Vue.component("parent-component",{
//data属性
data:function(){
return{
sonMsg:""
}
},
methods:{
recvMsg:function(msg){
this.sonMsg = msg
}
},
template:`
<div>
<h1>父组件</h1>
<h4>子组件传递的数据：{{sonMsg}}</h4>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
//创建子组件
Vue.component("child-component",{
data:function(){
return {
myInput:""
}
},
methods:{
sendMsg:function(){
this.$emit("customEvent",this.myInput);
}
},
template:`
<div>
<h1>子组件</h1>
<input type="text" v-model="myInput"/>
<button @click="sendMsg">发送</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。