vue2.0的三种常用传值方式，并且如何实现？

问题网址 : vue2.0的三种常用传值方式,并且如何实现?

父组件向子组件传值

使用prop实现父组件上的数据向子组件的传递
1. 使用props建立数据通道的渠道

// 这是父组件
<div id="app">
// 这是子组件
    <child message="hello" ></child>
</div>

2 . 在子组件中通过props传递过来的数据

Vue,component('child',{
    props:['message'] 
})

子组件向父组件传值

1. 子组件中需要一个点击事件触发一个自定义事件

Vue.component('son',{
            methods:{
                handleClick(){
                // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
                    this.$emit('toFather',123)
                }
            },
            template:`
                <div>
                    <h1>这是子组件</h1>
                    <button @click="handleClick" >
                        发送给父组件
                    </button>
                </div>
            `
        })

2 . 在父组件中的子标签监听该自定义事件得到传递的值

        Vue.component('parent',{
            data:function(){
                return {
                    myValue:''
                }
            },
            methods:{
                // 得到传递的值
                rcvMsg:function(msg){
                    console.log('接收到数据了'+msg);
                    this.myValue=msg;
                }
            },
            template:`
                <div>
                    <h1>这是子组件</h1>
                    <p>
                        {{'子组件传过来的值'+myValue}}
                    </p>
                    // 在标签使用v-on 获取子组件发送的事件
                    <son @toFather="rcvMsg"></son>
                </div>

            `
        })

非父子组件传值

有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值
1 . 创建一个空的vue

    // 创建一个空的公共的vue对象
    var bus = new Vue();

2 . 在组件1中,定义$emit来发送数据

bus.$emit('test','数据')

3 . 在组件2中使用$on来接收传递的数据

 bus.$on('test', function(num) {
     this.getData = num;
       //事件的解绑问题 
        bus.$off("test")
 })

当然非父子传值的方法不只有一种我们也可以使用 localstorage 来传值和取值

// 在第一个组件中 setItem 设置值
localstorage.setItem('test','数据')
// 在第二个组件中 getItem 获取值
localStorage.getItem("test");

如果涉及到兄弟之间组件有大量通信的,我们就需要专门的 状态管理模式vuex 这个等以后再给大家做补充