我说这是全网最全vue组件通信方式

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模式的缺点是无法跟踪数据的改变，因为所有组件都可以更改数据

在Vue3中，父组件可通过创建一个ref(null)，然后将赋值的元素写在当前子组件上即可，在需要的时候，通过定义的响应式变量即可获取，获取后即可取得当前子组件内部dom以及当前子组件内部变量方法等，并且直接使用子组件内部方法。但是有时候获取的时候返回的没有什么信息只有一个 {_v_skin:true} 这个信息，这条信息表示数据无法响应。

此时childDomvalue的值为{_v_skin:true}无法获取子组件内部信息

此时父组件即可获取子组件内部变量与方法与当前dom等信息

于是我参考着改了一点点,记录一下,写得不好,仅供参考, 见谅~

---------------data中-------------------

------------------methods---------------------

引用**姐的一段话

但是，（又敲黑板！！！）我们给后台传过去了父节点，如果有反显的情况下(如：修改，查看功能)，一旦有父节点，子节点又将会全部勾选！！这种情况下又该怎么办呢？

思路如下：

1循环遍历出最深层子节点，存放在一个数组中

2将后台返回的含有父节点的数组和第一步骤遍历的数组做比较

3如果有相同值，将相同值取出来，push到一个新数组中

4利用这个新的重组的数组给Tree组件selected赋值

1使用$parent可以获取父组件没传的属性和方法

第一步：父组件定义一个数据

第二步：

$parent和$children的区别是$parent方法在created里调用，$children方法在mounted里调用

2通过 provide和inject可以父传子也可以爷爷传孙子  可以向下传递，不可以兄弟之间传值，兄弟传值建议使用事件总线的方式

注意：provide/inject可实现跨组件传值，数据的流只能是向下传递，其中父组件provide，子组件inject。provide : 必须在父组件进行使用，用来给后代组件注入依赖

（属性或方法）inject :  必须

在子组件进行使用，用来获取根组件定义的要跨组件传递的数据

基本传值方式

第一步：

第二步：

第三步：验证子传父不成功，会进行报错

第四步：如果父级组件的值是动态从接口中获取的，需要把provide改成函数的形式，数据以函数的形式返回

第五步：儿子也可以使用爷爷传的内容

3在Vue脚手架中使用style的方式  显示背景

以上就是关于我说这是全网最全vue组件通信方式全部的内容，包括:我说这是全网最全vue组件通信方式、Vue3组件——父组件通过ref获取子组件内部信息失败、[antd of vue] a-tree组件子节点不完全勾选获取父节点的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！