vue组件之间的通信

一、组件之间的通信


组件之间数据传递：
props down,events up


1、父组件给子组件传值


props down


步骤：
①在创建子组件 指定属性，把要传递的值给属性

②在子组件内部声明props属性
props:['name']
//props数组中的元素就是属性的名称，在组件创建完成之后，只要是通过该属性传值了，就可以直接在props的元素中拿到传递过来的数据




注意事项：
1、在组件中，data属性必须是一个带有返回值而且返回值是对象的方法
2、如果在通过属性传值时，值是会变化，通过v-bind指令将变量绑定到属性

    
    
    




    {{msg}}
    

2、子组件和父组件通信
events up


步骤：
要想通过事件传值，要约定事件的名称：toFather
①在调用子组件时 绑定自定义的事件

②在子组件中触发自定义的事件，并传值
this.$emit('事件的名称','传递的数据')
this.$emit('toFather',123);

    
    
    




    {{msg}}
    

3、ref
父组件操作子组件：


<子组件 ref='名称'>
在父组件中可以通过:this.$refs.名称
(react: this.refs.名称)


子组件操作父组件：
this.$parent.属性或者方法

    
    
    




    {{msg}}
    

4、兄弟组件之间通信
借助于事件
var bus = new Vue()

欢迎关注我的个人技术公众号！javascript艺术