Vue学习笔记七

我就是我 2022-06-09 11:25 173阅读 0赞

### 使用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>