vue组件之prop

关键词：prop

渐进式探索学习(官网的例子)

    <div id="demo">
        <child message="hello!"></child>
    </div>

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
    var vm = new Vue({
    
        el: "#demo"
    
    })

来个复杂点的，实现父组件向子组件传数据

    Vue.component('child', {
  props: ['message'],
  template: `
  <div>
     <h3>{{title}}</h3>
     <p>{{ message }}</p>
  </div>
  `,
  data(){
     return { title: '越人歌' }   // 注意写成函数形式
  }
})
    var vm = new Vue({
        el: "#demo",
        data:{
            poem:['山有木兮木有枝','心悦君兮君不知']
        }
    })

传两个数据试试

Vue.component('child', {
  props: ['message','time'],
  template: `
  <div>
     <h3>{{title}}</h3>
     <p>{{ message }}</p>
     <i>{{time}}</i>
  </div>
  `,
  data(){
     return { title: '越人歌' }
  }
})
    var vm = new Vue({
        el: "#demo",
        data:{
            poem:['山有木兮木有枝','心悦君兮君不知'],
            age:'3000年'
        }
    })

    <div id="demo">
        <child v-for= "item1 in poem":message="item1" :time="age"></child>
    </div>

Prop 验证

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时，它包含验证要求：

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

这时候我们再来改写一下

    Vue.component('child', {
  props: {
    'time': {    
       type: Number,
       default: 1000
      },
    'message' :{
        type: Object,
        default: function () {
        return { message: 'hello' }
      }
    } 
  },

  template: `
  <div>
     <h3>{{title}}</h3>
     <p>{{ message }}</p>
     <i>{{time}}</i>
  </div>
  `,
  data(){
     return { title: '越人歌' }
  }
})
    var vm = new Vue({
    
        el: "#demo",
        data:{
            poem:['山有木兮木有枝','心悦君兮君不知'],
            /*age:3000*/
        }
    })

    <div id="demo">
        <child v-for= "item1 in poem":message="item1"></child>
    </div>