vue props (组件自定义特性) 介绍 【草稿】

1. 用 prop 向子组件传递数据 

<div id="div" >
<food></food>
</div>

<script>
Vue.component('food', {
     props: ['type'],
     template: '<h1>{{ type }}</h1>',
     data:function(){
               this.type="fruit"}
})

new Vue({
     el:"#div"
})

</script>

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

Vue.component('food', {
     props: ['type'],
     template: '<h1>{{ type }}</h1>',
     data:function(){
               this.type="fruit"}         //在data 里把type 这个prop的值设置为 fruit
})

所以在网页显示的效果（html 插入组件的名称<food>标签，会显示template模板的内容）

<food>  ==>   '<h1>{{ type }}</h1>'   

                                      | |

                                      | |