一、props 通信方式。(父传子)

1.定义:
子组件的 props 选项能够接收来自父组件数据。
props 是单向绑定的:当父组件的属性变化时,将传给子组件,但是不会反过来。
这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 props 都会更新为最新值。

2.使用方法:
父组件在调用子组件的时候加:aa-bb = “变量”,即 v-bind。然后在子组件里 props 用 aaBb 接收变量。

知识点:参数 aa-bb 不能使用驼峰,不然数据取不到,因为 html 标签属性不支持驼峰。多个单词组成的可以使用横杠连接:mytitle 或者 my-title,如果使用横杠命名的,子组件 props 中接收时不能使用横杠,要使用驼峰命名。

二、$refs 通信方式。(父传子,子传父)

1.定义:
对于 ref 官方的解释是:ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

如果 ref 用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过 $refs 可能获取到在子组件里定义的属性和方法。
如果 ref 在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过 $refs 可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器类似。

2.使用方法:
调用子组件的时候定义一个 ref
<child ref=“name”></ child>
父组件主动获取子组件的数据,使用 $refs
this.$refs.name.属性
this.$refs.name.方法
子组件主动获取父组件的数据
this.$parent.数据
this.$parent.方法
以上这种方法可以改变父组件的数据。
比如 this.$parent.test=“www”,父组件的test就变成 www 了

【props和$refs之间的区别】

props 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用 props。

$refs 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且 ref 用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

三、$emit 通信方式。(子传父)

1.定义:
在Vue中,父组件监听子组件触发的事件,需要在子组件用使用 $emit 触发,在父组件中使用 v-on: / @ 自定义事件监听。

2.使用方法:
父组件在调用子组件的时候加自定义事件名 @eventName=“方法名”,即通过语法糖 v-on(简写@)来监听子组件提交的事件 eventName,eventName 是子组件提交的事件名称,也是父组件通过v-on监听的事件名称,然后在子组件里用 this.$emit(‘eventName’,[…args]) 触发,可以有两个参数;第一个参数必填,触发当前实例上的函数;第二个参数选填,是向父组件函数传递的数据。

注意:
1.在vue中,事件名不存在自动化的大小写转换,触发事件名需要完全匹配监听这个事件所用的名称。(驼峰就必须驼峰,短横线就必须短横线。)
2.v-on 就是用于绑定事件的。v-bind 用于绑定数据和元素属性。

四、vuex 通信方式。(非父子)

vuex理解可以看:vuex的全面用法总结

使用举例:

1.所建js文件。
在这里插入图片描述
2.传输数据vue组件。
在这里插入图片描述
注意:
在这里插入图片描述
3.接收数据vue组件。
在这里插入图片描述
4.再传一层。(根据需求)
在这里插入图片描述

五、bus(兄弟组件)

Logo

前往低代码交流专区

更多推荐