Vue中父子组件、兄弟组件之间传值、改值

一、父传子

方法一：传值法 （不能修改父组件值）	父组件：                  注：parentData为父组件中的数据，childData为子组件获取时的数据名 子组件：           props:['childData'] 或者         props:{                  childData:{                        type:'string',//数据类型                        default:''//初始值                   }          }
方法二：$parent 直接使用法（能修改父组件值）	父组件：                  注：父组件中要有parentData数据 子组件：           this.$parent.parentData 子组件修改父组件中的数据： 子组件：           $parent.parentdata = '子组件修改了父组件的值'">点击修改父组件的值
方法三：依赖注入 （此方法可以在孙组件中直接获取到大组件的值，不用一级一级传入）	父组件：                         export default {                   name: "",                   provide(){                         return {                                 parentData:this.parentData                         }                   },                   data() {                             return {                                 parentdata: "你好我是父组件值",};                    },          } 子组件：           {{parentData}}         export default {                   name: "",                   inject:['parentData'],                   data() {                             return {                                 parentdata: "你好我是父组件值",};                    },          }

二、子传父

方法一：$emit （不能修改子组件值）	父组件：                         getchildData(val){                       console.log(val)             },         注：getchildData为父组件中的函数 子组件：            $emit('change',childData)">父组件获取子组件值
方法二：$children (可以修改子组件中的数据)	父组件：          父组件修改子组件中的数据：           $children.childData= '子组件修改了子组件的值'">点击修改子组件的值
方法三：$ref （可以修改子组件值）	父组件：         this.$children.childData 父组件修改子组件中的数据：         this.$refs.children.childData='父组件修改子组件值'

三、兄弟之间传值（不能修改值，只能传值）

        ①：定义一个供用bus文件（在src目录下新建utils下建bus.js文件）

                代码如下：

import Vue from 'vue'
export default new Vue()

          ②：在传值组件中引入bus及通过$emit传值

                ·     import Bus from "@/utils/bus";

                ·     Bus.$emit('summ',this.value）

          ③：在传值组件中引入bus及通过$emit传值

               ·      import Bus from "@/utils/bus";

               ·      Bus.$on('summ',(data)=>{   //使用summ的值

                                console.log(data)

                       })