VUE——组件（一）基本用法

组件是Vue最核心的功能。

使用props传递数据——父组件向子组件传值

基本用法

props的值可以是两种，一种是字符串数组，一种是对象

数组

    <div id="app">
        <my-component message="来自父组件的值"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component('my-component',{
            props:['message'],
            template:'<div>{{message}}</div>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>

　　最后的渲染结果为

<div id="app">
        <div>{{message}}</div>
    </div>

有时候传递的数据并不是写死的，而是来自父级的动态数据，这时候用v-bind来动态绑定props的值，当父组件的值发生变化时，也会传递给子组件

    <div id="app">
        <input type="text" v-model="parentMessage" />
        <my-component :message="parentMessage"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component('my-component',{
            props:['message'],
            template:'<div>{{message}}</div>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                parentMessage: ''
            }
        })
    </script>

用v-model绑定来父ji的数据parentMessage，当输入框输入任意值，子组件接收到的porps也会实时响应，并更新组件模板。

业务中经常会遇到两种需要改变props的值，一种是父组件传递初始值，子组件将它作为初始值保存起来，在自己的作用域可以随意修改和使用。

    <div id="app">
        <my-component :init-count="initCount"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component('my-component',{
            props:['initCount'],
            template:'<div>{{count}}</div>',
            data:function(){
                return{
                    count:this.initCount
                }
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                initCount: 1
            }
        })
    </script>

对象

当props需要验证时，就需要对象写法

当你的组件需要提供给别人使用时，推荐都进行数据验证。

        Vue.component('my-component',{
            props:{
                propA:Number,//数字类型
                propB:[Number,String],//数字或者字符串类型
                propC:{//布尔类型，如果没传值，默认为true
                    type:Boolean,
                    default:true
                },
                propD:{//数字类型，比传
                    type:Number,
                    requeired:true
                },
                propE:{//如果是数组或者对象，默认值必须是一个函数来返回
                    type:Array,
                    default:function(){
                        return []
                    }
                },
                propF:{//自定义验证函数，
                    validator:function(value){
                        return value>20
                    }
                }
            }
        }) 

　　验证type的类型可以是String Number Boolean Object Arrea Function