vue的组件传值

vue的组件传值

vue的强大之处在于他的组件化，component，在页面由多个组件组成的情况下，组件间传值会变得稍微复杂点，这篇文章会根据vue组件间如何传值来做一些解说。

一般来说页面中的组件间关系有：父子组件和兄弟组件，传值方式分为（1）父传子（2）子传父（3）兄弟互传

1、父组件传值给子组件

    
    
    



    {{msg}}
    

上面代码中我写了个嵌套组件，一个为父，一个为子，名字分别为father-component和son-component，我们要记住，在父传子的过程中我们在子组件标签上使用属性传值，到了子组件实例中用props属性来接受值，上面代码我在

给子组件传了个msg的数据，数据值myValue在父组件中会变化

子组件通过props以数组形式接受到后可以直接在template中使用msg

2、子组件向上传值给父组件

在子组件向父组件传值过程中，稍微复杂一点，子组件需要触发一个事件，并将值传过去，父组件要绑定一个事件来接受子组件的值。如上述代码，子组件在handleClick中通过$emit确定父组件的触发事件toFather和传过去的值，子组件上面写上要绑定的父组件的触发事件名字recvMsg，父组件中自定义了一个事件recvMsg，在methods中获取了传过来的值。记住$emit关键方法。

3、兄弟组件间的传值

兄弟间传值需要用到bus事件车，确定触发事件并传值使用$emit,绑定事件得值使用$on，借助新的vue实例完成数据传递。

如果帮到你请点个赞。