对vue的props实现双向数据流

对vue的props实现双向数据流,第1张

vue官网中规定, vue中的Prop是单向数据流

在vue中,组件中的Prop是单向绑定的,父组件的Prop的更新会向下流向到子组件中,但是反过来则不行。这样做是为了防止从子组件意外改变父组件的状态,从而导致应用的数据流向难以理解。

如果在子组件中改变父组件的某个Prop值,控制台会发出警告,但是在实际的实践中,我们还是会遇见需要改变父组件Prop的情况。

使用组件时,一开始绑定某Prop的值,在后续交互中,需要根据情况改变父组件中Prop的值,在这种场景下,我们要实现的是类似于数据双向绑定的功能,此时我们可以用到的方法有:

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

在vue中通过props来传递参数的时候,可能会遇到需要父直接传到孙的情况,此值在子组件中并没有什么作用,只是在孙子组件中有用到,这个时候就可以通过$attrs来传递参数,例如

1首先,在子组件中不用再通过props来接收来自父组件的信息;

2在子组件中调用孙子组件,绑定$attrs;

3这样在孙子组件就能直接接收父组件的内容

组件通信常用方式

props

父给子传值

自定义事件

子给父传值

$emit

$bus事件总线

任意两个组件之间传值常用事件总线 或 vuex的方式。

event bus

vuex

唯一的全局数据管理者store,通过它管理数据并通知组件状态变更。

边界情况

$parent/$root

兄弟组件之间通信可以通过共同祖辈搭桥 $parent 或$root

$children

父组件可以通过$children访问子组件实现父子通信

$refs

获取子节点引用

provide/inject

能够实现祖先和后代之间的传值

$attrs $listeners

非prop特性 ,可以包含所有父作用域的绑定(class style除外)并且可以通过v-bind=“$attrs”传入组件内部,创建高级组件时特别有用

插槽语法是vue实现的内容分发api 适合复合组件开发,在通用组件库的开发中大量使用。

匿名插槽

具名插槽

将内容分发到子组件指定位置

作用域插槽

分发内容到子组件的数据

create函数

建通知组件,Noticevue

vueprop生效时间?vue中prop属性用法是怎么的呢?我们一起来了解一下吧!

在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。

prop属性可以定义属性的类型,也可以定义属性的初始值。

prop

event

style和class

natvie修饰符

$listeners

v-model

sync修饰符

$parent 和 $children

$slots 和 $scopedSlots

ref

最常见的组件通信方式,由父组件向子组件传递。prop可接收一个数组或对象

子组件向父组件发送通知,并传递参数

子组件

父组件

父组件可以向子组件传递style 和 class ,style 和 class将合并到子组件根元素上

父组件

子组件

最终渲染结果

父组件在使用子组件时,在子组件上定义一些属性,这些属性将作用于子组件的根元素上,但是不包括style和class

父组件

子组件

最终渲染结果

Tip:子组件可以通过定义 inheritAttrs:false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据

在注册事件时,父组件可以通过 navite 修饰符,将事件注册到子组件根元素上

父组件

子组件

子组件可以通过 $listeners 获取父组件传递过来的所有处理函数

父组件在使用子组件时,可以在子组件上绑定v-model,子组件通过定义model的prop和event还获取父组件定义的值

父组件

<compn v-model=" "datas" />

子组件

和 v-model类似,用于双向数据绑定,不同点在于 v-model只能针对一个数据进行绑定,而 sync 修饰符没有限制

子组件

父组件

在组件内部,可以通过$parent 和$children属性,分别获取当前组件的父组件和子组件实例

ref

在使用组件时,可以通过在组件上定义ref来获取组件实例

provide和inject 可以实现深层组件通信,顶层组件只需定义provide,底层组件通过inject接受数据

顶层组件

如果一个组将改变了地址栏,所有监听地址栏的组将都会做出相应的改变,

vuex 过于笨重,通常不建议在小型项目中使用,小型项目可以使用store 或 eventbus代替vuex,vuex本质上就是一个数据仓库。在此不做过多赘述,先挖一个坑,下回再叙。

store模式其实就是一个普通的js模块,各组件可以导入该模块,将数据放到data里面,此时store就具有响应式了。

tip: store模式的缺点是无法跟踪数据的改变,因为所有组件都可以更改数据

1参数介绍

使用 setup 函数时,它将接收两个参数:

11 props 可以获取 父组件传递过来的属性

12 context

2父子组件交互demo

与vue2的区别:子组件在setup函数中通过prop属性名获取父组件传递的参数,通过contextemit('自定义事件名',参数)触发事件而不是this$emit。

21父组件

22子组件

以上就是关于对vue的props实现双向数据流全部的内容,包括:对vue的props实现双向数据流、vue中的$attrs是什么、vue最全的组件通信和插槽,看这一篇就够了等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9759084.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存