Vue之组件之间数据传递

组件之间不允许数据进行传递，避免数据源污染。但我们可以通过一种方法进行传递,通过属性传递 。我们知道在vue中v-bind指令可以对属性值进行改变，所以利用这一特性实现。

直接看代码

<div id="app">
    <my-h1 v-bind:message="msg" v-bind:count="i"></my-h1>
</div>
<script>
    //例如此时要取得msg值
    Vue.component('my-h1',{
        //props:properties(属性）
        //自定义一个属性message、count
        //用v-bind将msg值赋值给message属性
        props :['message','count'],
        //接着我们就可以通过属性获得值
        template:`<div>
                    <h1>{{ message }}</h1>
                    <h2>{{ count+4 }}</h2>
                  </div>`
    })

    var app =new Vue({
        el:"#app",
        data:{
            msg:"Hello,Vue",
            i:1
        }
    })
</script>

解释 

1. 在组件中自定义了2个属性message、count
2. 给属性加上v-bind指令
3. 因为<my-h1>标签是在<div id="app">中，这时是可以访问到实例app中的数据，所以我们将msg、i 赋值给属性message、count
4. 因为属性message、count是定义在组件当中，所以在组件中可以通过这2个属性访问到它的值

补充 

在自定义组件中，对于自定义属性我们还可以对其设置数据验证、默认值。

如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你

<div id="app">
    <my-h1 :message="" :count=""></my-h1>
</div>
<script>

    Vue.component('my-h1',{
        //自定义属性
        props : {
            //属性1
            message: {
                //设置传递的数据应该是String
                type : String,
                //设置默认值
                default(){
                    return "hello"
                }

            },
            //属性2
            count:{
              type : Number,
            },
            //属性3
            F: {
                // 自定义验证函数
                  validator: function (value) {
                        if(value...)
                        return ;
                  }
             }
        },
        //接着我们就可以通过属性获得值
        template: '<h1>{{ message }}，{{count}}</h1>'
    })
<script>