组件传值-高级

一、属性传值（父组件给子组件传值）

        也就是前面的属性传值），在子组件中的props中定义一个属性，在父组件中使用子组件的标签中定义变量为刚刚定义的属性，然后在子组件中将该属性当作变量使用

        子组件部分：

                        

        父组件部分：

                        

二、反向传值（子组件向父组件传值）

       因为单向数据流（父组件的数据流向子组件，子组件不要去改）的原因，若子组件要修改父组件的数据并且让页面的数据更新，只能通过通知父组件，告诉父组件让父组件自己来修改自己的数据。

               步骤：子组件部分：

                                1.在想要改变的标签中绑定事件，并绑定该事件需要进行的操作的函数

                                2.在改函数中绑定自定义事件（自己设计），这叫触发事件

                            父组件部分：

                                1.给该标签绑定刚刚定义的事件（相当于监听器），子组件可以通过this.$emit来触发自定义事件，父组件可以通过绑定自定义事件来调用父组件中的方法来进行数据修改

                        子组件只是实现触发功能，父组件是执行触发功能（是否实现执行触发功能可以根据自己的需求来）

        例：第一种写法

        第二种写法：因为v-modle等价于“：value，@input” 的写法

vue2.0：可以直接取到的是指定的属性

                        

vue3.0则需要取到指定相应的属性

                        

                父组件中

        

                子组件中：

                

                

        ​​​​​​​        

三、穿透传值（跨组件传值）

        将父组件中的数据传递给孙组件，传递的数据可以是number、array、object、函数等等，使用v-bind进行传递，若子组件想要使用该数据。则在props中定义相应的从父组件中传递过去的属性名，若子组件不想使用，想要直接给孙组件使用，则在孙组件标签上添加$attrs属性即可

四、依赖注入（provider/inject）：是多层传值的优化版

        含义：父组件直接给后代组件提供数据（子组件、孙组件、爷孙组件等等）

        注释：依赖注入不具备响应式的特点、但可以进行跨层次传递数据，子组件也可以提供数据给孙元素、孙孙元素，  但子组件的数据不能反过来给父组件使用

        步骤：1.在父组件中添加provide，里面添加提供给后代的数据

                   2.父组件的后代哪个需要使用父组件中的数据，则在该组件中添加inject：[想要使用的数据名]        里面的属性名必须与provide中的名一致

                   3.provide必须与inject一起使用

//子组件中不使用provide中的数据，则不做任何操作

五、$parent、$root、$refs的使用

        1.$parent:

                含义：是指当前组件的父组件，可以通过使用$parent直接访问其直接父组件

        2.$root:

        含义：指当前组件所在的根组件，通过$root我们可以在任何子组件中访问根组件的属性、方法、事件等，可以用于在组件层次结构中进行跨组件的通信还可以进行修改

        

        3.$refs:可以用于访问组件或者DOM元素，使用refs属性给组件或元素命名时，vue会自动创建$refs对象，并将这些命名的组件或元素作为其属性，通过$refs,你可以在组件的代码中访问它们，并且可以通过它来修改标签或组件的内容

        例：

六、中央事件总线（？？？）

        含义：通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果。也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。

我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。

this.$root.$emit()触发事件

this.$root.$on()绑定事件

this.$root.off()解绑事件