vue组件间通信子与父详解（二）
程序员文章站
2022-04-16 13:08:01
接着继续学习。
二、组件间通信（子组件传值给父组件）
通过事件的方式来完成数据的传输。
①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
met...
接着继续学习。
二、组件间通信（子组件传值给父组件）
通过事件的方式来完成数据的传输。
①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。