VUE组件之间的传值

我们先快速搭建父子组件

子组件

父组件

先定义值并传递给子组件

    export default {
       data(){
          return{
             name:'father'
          }
        },
        components:{
            test
        }
    }

这边捎带提一下为什么data规定是一个函数而不是对象

Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响

如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
两个实例应该有自己各自的域才对,了解浅拷贝的朋友应该很容易理解

往子组件中传递参数，通过v:bind（缩写：）绑定数据 并通过v-model修改数据方便测试

在子组件中通过props接受 并可以直接使用插值表达式显示值

扩展props参数

    export default {
        props:{
            name:{
                type: String,        =>表示数据类型 如果为null支持一切格式
                default: 0,            =>默认值  如果父组件未传值默认的值
                required: true,      =>是否必须传递值
                validator: function (value) {    =>自定义验证函数（充当参数，此处name并不是函数，所以无需此参数）
                   console.log(value)
                }

            }
        }
    }

拆分一下

      props: {
        // 基础类型检测 (`null` 意思是任何类型都可以)
        propA: Number,
        // 多种类型
        propB: [String, Number],
        // 必传且是字符串
        propC: {
        type: String,
        required: true
        },
        // 数字，有默认值
        propD: {
        type: Number,
        default: 100
        },
        // 数组/对象的默认值应当由一个工厂函数返回
        propE: {
        type: Object,
        default: function () {
            return { message: 'hello' }
        }
        },
        // 自定义验证函数
        propF: {
        validator: function (value) {
            return value > 10
        }
        }
    }
    注意 props 会在组件实例创建之前进行

根据传递的数据类型设置相应的参数，一般情况下只需接收即可

props参数接受可直接使用插值表达式渲染

父组件接收

        

            
I  am  father
            

                
            
              //此处的方法名 与 $emit设置的方法名相同             
                                         //注意方法是与$emit方法相同 而不是$emit方法与父组件设置的方法相同  逻辑不能搞错
        
    

    

    

父组件还可以使用$event 修改数据

兄弟组件数据传递

先看一下父组件

test子组件

testone 子组件

实现兄弟组件之间数据传递，不妨碍父组件

在src下新建js，引入vue 暴露实例

    import Vue from 'Vue'
    export default new Vue()  =>这样既可

在兄弟组件中导入此实例 import bus from './../eventBus.js'

首先我们先在传数据的兄弟组件中操作

在另一个兄弟组件中监听此函数