Vue 组件(二)——Prop

四、Prop

        在组件的使用过程中，经常会遇到需要向子组件传递数据的情况，这个时候就需要用到 prop来自定义属性传值了。

   prop概念：

        prop属性其实是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件。

        在Vue组件中，props选项的类型可以是一个字符串数组，也可以是一个对象。

Vue.component('PostItem', {props: ['title'],template: '<h3>{
   {title }}</h3>'
})
// 当以对象形式存值时，对象的称和值分别是 prop 各自的名称和类型，
// 类型可以是String、Number、Boolean、Array、Object、Function、Promise 等值
Vue.component('PostItem2', {props: {'title': String},template: '<h3>{
   { title }}</h3>'
})

  prop 静态传值

         props选项中定义的prop可以当成该组件实例的数据属性来使用

<div id="app"><post title="这个是Vue组件"></post>
</div>
<script>Vue.component('post', {props: ['title'],template: '<h3>{
   { title }}</h3>'})let vm = new Vue({el: "#app"})
</script>

   prop 动态传值

<div id="app"><post :title="arr"></post>
</div>
<script>Vue.component('post', {props: ['title'],template: '<div><h3 v-for="item in title ">{
   { item }}</h3></div>'})let vm = new Vue({el: "#app",data:{arr:['第一个','第二个']}})
</script>