Vue学习笔记七

使用prop向子组件传递数据

<div id="app"><child v-for="item in items" v-bind:msg="item.name"></child></div><script type="text/javascript">    var child = {        props:['msg'],        template:"<div><h4>{{msg}}</h4></div>"    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaoD"},                {name:"joe"}            ]        },        components: {            'child': child,        }    })</script>

易犯错误（如果文档看到这里就想到如果传递两个值，那么是不是应该下面这种写法，很抱歉，会有问题。如果在子组件中使用msg，那么直接报错，如果使用a则不会报错，因为这里Vue认为a覆盖了msg

<div id="app"><child v-for="item in items" v-bind:msg="item.name" v-bind:a="1"></child></div><script type="text/javascript">    var child = {        props:['msg'],        props:['a'],        template:"<div><h4>{{msg}}</h4></div>"    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaod"},                {name:"joe"}            ]        },        components: {            'child': child,        }    })</script>

prop传递两个值的正确打开方式

<div id="app"><child v-for="item in items" v-bind:msg="item.name" v-bind:a="1"></child></div><script type="text/javascript">    var child = {        props:{            msg:null,            a:null,        },        template:"<div><h4>{{msg}}--{{a}}</h4></div>"    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaod"},                {name:"joe"}            ]        },        components: {            'child': child,        }    })</script>

上面的null表示任何数据都可以接受，但是Vue还提供了可以验证数据的功能，如果不按照指定的数据传送，就会报错
注意：首字母需要大写
对于可以指定的数据类型有哪些，搬一下官网的

Vue.component('example', {  props: {    // 基础类型检测 (`null` 意思是任何类型都可以)    msg1: Number,    // 多种类型    msg2: [String, Number],    // 必传且是字符串    msg3: {      type: String,      required: true    },    // 数字，有默认值    msg4: {      type: Number,      default: 100    },    // 数组/对象的默认值应当由一个工厂函数返回    msg5: {      type: Object,      default: function () {        return { new_msg5: 'hello' }      }    },    // 自定义验证函数    msg6: {      validator: function (value) {        return value > 10      }    }  }})

组件命名规范

注意：因为 HTML不区分大小写，所以采用驼峰式命名的prop需要转化为短横线隔开,对于定义的组件也一样不能够使用驼峰式在HTML中出现

<div id="app">    <my-child v-for="item in items" name="item.name"></my-child></div><script type="text/javascript">    var myChild = {        props:['name'],        template:"<div><h4>{{name}}</h4></div>"    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaoD"},                {name:"joe"}            ]        },        components: {            'my-child': myChild,        }    })</script>

传递数字

传递数字需要使用v-bind，但是传递单纯的文本不需要使用v-bind，动态传递的时候需要使用v-bind，静态传递的时候不需要使用

<div id="app"><child v-for="item in items" v-bind:msg="1"></child></div><script type="text/javascript">    var child = {        props:['msg'],        template:"<div><h4>{{msg+1}}</h4></div>"    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaoD"},                {name:"joe"}            ]        },        components: {            'child': child,        }    })</script>

在子组件中修改prop传递的数据

这时候官网建议我们不要直接进行修改
方法一：定义一个局部变量

<div id="app"><child v-for="item in items" v-bind:msg="item.name"></child></div><script type="text/javascript">    var child = {        props:['msg'],        template:"<div><h4>{{result}}</h4></div>",        data: function(){            return {                // 将首字母大写                result: this.msg.replace(/(\w)/,function(v){return v.toUpperCase()})            }        }    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaod"},                {name:"joe"}            ]        },        components: {            'child': child,        }    })</script>

方法二，通过计算属性

<div id="app"><child v-for="item in items" v-bind:msg="item.name"></child></div><script type="text/javascript">    var child = {        props:['msg'],        template:"<div><h4>{{result}}</h4></div>",        computed: {            result: function(){                return this.msg.replace(/(\w)/,function(v){return v.toUpperCase()})            }        }    }    var app = new Vue({        el: "#app",        data: {            items: [                {name:"xiaod"},                {name:"joe"}            ]        },        components: {            'child': child,        }    })</script>

非prop属性

对于子组件的属性，我们不用全部都通过prop传递过去，也可以直接在定义好的子组件中使用

<bs-date-input required="true"></bs-date-input>