好资源导航 » 文章资讯 » vue父子组件的通信方法(实例详解)

vue父子组件的通信方法(实例详解)

2023-08-09 15:08:06 68

一、父组件向子组件传递数据

1、首先形成父子组件关系





Document

2、在子组件中定义一个props，定义两个变量（messages）（moviess）

props:['messages','moviess']

3、使用子组件时，用V-bind绑定两个变量（messages）（moviess），并且把父组件中的数据（message）（movies）传给这两个变量。

****完整代码*****





Document

**props中补充写法

props:{
//1、类型限制
//messages:Array,
//moviess:String,

//提供一些默认值
messages:{
type:String,
default:'aaaa',
required:true
},
//当使用组件的时候，没有绑定props中定义的变量，就会显示定义的默认值
moviess:{
//类型是对象或数组，默认值必需是一个函数。
type:Array,
//default:[]
default(){
return[]
}
}
}

二、子组件向父组件传数据

1、构成父子组件关系

2、在子组件中自定义一个事件作用：发射一个事件给父组件

{{item.name}}
methods:{
btnclick:function(item){
//发射事件：自定义事件
this.$emit('itemclick',item)
}
}

3、在父组件的模板中使用子组件中定义的事件@itemclick="cpnclick" 并且在父组件创建一个新的事件cpnclick


methods:{
cpnclick:function(item){
console.log('cpnclick',item)
}
}

***完整代码***







Document

总结

以上所述是小编给大家介绍的vue父子组件的通信方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue父子组件的通信方法(实例详解)

{{cmovies}}

{{messages}}

随机推荐

vue父子组件的通信方法(实例详解)

{{cmovies}}

{{messages}}

热门推荐

随机推荐