Vue组件间通信方式

168 阅读1分钟

1.父子组件传值

在子组件标签上,通过绑定属性形式,传值给子组件。在子组件内部使用props去接受父组件传过来得的。

看图:

QQ图片20210815220323.png

image.png

2.子父传值

在子组件标签上,申明一个回调函数,在子组件内部用$emit去触发这个回调函数

看图:

image.png

image.png

同步数据方法一:

image.png

image.png

这个可以把方法写在标签内,vue帮为我们提供一个语法糖,同步修改数据

这两者的效果是一样的

image.png

image.png

ps: 书写格式不能改变

同步数据写法二,v-model的语法糖写法

image.png

image.png

总结

什么时候使用asyn 或者 v-model

v-model有局限性,只能传的值只能叫value

sync传值名字可以随意定义

3、$parent$children

$parent

image.png

image.png

image.png

image.png

ps:在main.js中,this指向的是当前的实例

$chidlren

image.png

image.png

image.png

4、$attrs$listeners

image.png

image.png

image.png

不需要使用 props

$attrs表示属性结合 v-bind 属性

$listeners 表示方法的集合 v-on 方法

5、provide 和inject

以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

image.png

image.png