- 博客访问： 1637483
- 博文数量： 63
- 博客积分： 0
- 博客等级： 民兵
- 技术积分： 646
- 用 户 组： 普通用户
- 注册时间： 2015-05-26 18:02
个人简介
祸兮福之所倚,福兮祸之所伏
文章分类
分类： javascript
2020-06-19 18:09:07
vue做开发项目时经常用到组件的互相调用, 组件调用如何函数调用一样，相当方便，同时也相当频繁。
这里介绍常用的三种组件通信的方式。
一、 父组件向子组件传数据,这种情况多用于由父组件收集获取数据，传递给子组件，子组件根据数据形成相应的展示样式。
举例: parent.vue
children.vue
二、子组件向父组件传数据，通过触发事件向父组件发送数据,多用于检索,查询
parent.vue
children.vue
三、兄弟组件之间传参数, 当组件之间互不调用，但是却要传参数的情况, 一般多在两个组件同属一个父组件
原理: 通过第三方实, 组件接收方开启监听事件,组件发送方触发事件，触发时带上参数。必须同一个vue实例才能进行监听和触发。
这时候需要实例化一个三方vue实例进行传输 let vm = new vue()
传数据组件方
接受数据组件
以上就是vue常用的三种组件之间通信的情况。
这里介绍常用的三种组件通信的方式。
一、 父组件向子组件传数据,这种情况多用于由父组件收集获取数据，传递给子组件，子组件根据数据形成相应的展示样式。
举例: parent.vue
点击(此处)折叠或打开
-
<children :data='mess'></children> 对子组件的引用,将数据mess传输给子组件children中的data变量
-
-
data() {
-
return {
-
mess: {
-
'label': 'label',
-
'value': 'value'
-
}
-
}
- }
点击(此处)折叠或打开
- children.vue
- {{ mess.label }}
-
{{ mess.value }}
-
-
props : {
-
data: { 定义接受数据 data的数据类型和默认值 接收值都定义在props
-
type: object,
-
default: {
-
'label': 'label1',
-
'value': 'value1',
-
}
-
}
- }
二、子组件向父组件传数据，通过触发事件向父组件发送数据,多用于检索,查询
parent.vue
点击(此处)折叠或打开
-
<children @childrenclickquery=parentclickquery></children> 父组件调用子组件,定义parentclickquery函数
-
-
parentclickquery(data) {
-
this.msg = data // data就是子组件传递的数据 data = {'label': 'label','value': 'value'}
- }
点击(此处)折叠或打开
-
children.vue
-
-
<button @keyup.enter.native=clickquery>传递参数</button> 定义按钮事件名为 clickquery
-
-
data() {
-
return {
-
msg: {
-
'label': 'label',
-
'value': 'value'
-
}
-
}
-
}
-
clickquery() {
-
this.$emit('childrenclickquery', this.msg) // 触发当前组件事件,并传递参数, 触发父组件中的 childrenclickquery事件,同时为事件传递参数，父组件中通过事件接受参数
- }
三、兄弟组件之间传参数, 当组件之间互不调用，但是却要传参数的情况, 一般多在两个组件同属一个父组件
原理: 通过第三方实, 组件接收方开启监听事件,组件发送方触发事件，触发时带上参数。必须同一个vue实例才能进行监听和触发。
这时候需要实例化一个三方vue实例进行传输 let vm = new vue()
传数据组件方
点击(此处)折叠或打开
-
<button @click=ge></button> //
-
-
methods: {
-
ge() {
-
vm.$emit('blur','messages1') // 组件触发 触发blur事件,带上参数messages1
-
}
- }
接受数据组件
点击(此处)折叠或打开
-
-
created() {
-
vm.$on('blur',(arg) => { // 新建一个监听事件 blur,接受一个参数args并获取, 必须在事件触发前开启监听,这里放在实例创建时启动监听
-
this.test = arg // arg 就是 messages1
-
})
- }
以上就是vue常用的三种组件之间通信的情况。
给主人留下些什么吧！~~