清澈的风

vue2.0笔记(五)——props

Prop

prop是父组件用来传递数据的一个自定义属性,是property。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明prop

1
2
3
<div id="app">
    <my-com name="waston" age="18"></my-com>
</div>

1
2
3
4
5
6
7
8
Vue.component('my-com',{
       props:['name','age'],
       template:'<h1>{{name}}:{{age}}</h1>'
   });
   new Vue({
       el:'#app'
   })

简言之，就是父级(组件)自定义一些属性以及属性值，然后可以传到它的直接子级（所使用的模板）里
※注意是直接子级 如果h1外面再嵌套一层p无效

动态Prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

1
2
3
4
<div id="app">
    <input v-model="inputmsg">
    <my-com :msg="inputmsg"></my-com>
</div>

1
2
3
4
5
6
7
8
9
10
Vue.component('my-com',{
       props:['msg'],
       template:'<h1>{{msg}}</h1>'
   })
   new Vue({
       el:"#app",
       data:{
           inputmsg:'default message'
       }
   })

简言之，即绑定那个写在props里面的属性
※局部组件不便于定义props

循环绑定prop

1
2
3
<ul id="app">
    <name-list v-for="person in people" :man="person"></name-list>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.component('name-list',{
        props:['man'],
        template:'<li>{{man.name}}</li>'
    })
    new Vue({
        el:"#app",
        data:{
            people:[
                {name:'mary'},
                {name:'john'},
                {name:'sherlock'}
            ]
        }
    })

man相当于一个中间的媒介，原来li里是{ {person.name} },让man=person,然后再写到props里，li也就替换成了{ {man.name} }

※注意: Vue2.0里prop是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

静态模板+静态数据+prop

结合模板、组件以及动态prop的常见用法

props验证

常用写法示例

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue.component('component-name', {
  template: '#componentId',
  props: {  //多个prop传递,因为prop是对象,只要是对象格式就行
    value: {
      type: Number,
      default: 0
    },
    label: {
      type: String,
      default: ''
    }
  }
})
vueprops