1、在组件中data返回数组对象
2、在父级作用域中写入
(1)prop传值
<btn-grp :buttons="buttons"></btn-grp> Vue.component('btn-grp',{ props:['buttons'], //btn-group:基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 // role="group"按钮组合 template:` <div class="btn-group" role="group"> <button type="button" v-for="button in buttons" v-bind:class="\'btn \'+button.class" v-on:click="button.handler" >{{button.title}}</button> </div> `, data:function(){ return{ } } })
(2)数据写入组件模板中
<btn-grp></btn-grp> Vue.component('btn-grp',{ props:['buttons'], //btn-group:基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 // role="group"按钮组合 template:` <div class="btn-group" role="group"> <button type="button" v-for="button in buttons" v-bind:class="\'btn \'+button.class" v-on:click="button.handler" >{{button.title}}</button> </div> `, data:function(){ return{ buttons:[ {title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}}, {title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}}, {title:'删除',class:'btn-default',handler:function(){alert('点击删除按钮')}} ] } } })
分析:数据应该写到哪里?
props中声明的数据和组件data函数返回的数据主要区别就是props的来自父级,而data中是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template、计算属性computed、方法methods中使用。
上例的buttons就是通过props从父级传递过来的,在组件的自定义标签上写上该props的名称,如果要传递多个值,在props数组里添加即可。
再比如,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以用v-bind来动态绑定props的值,当父级数据变化时,会传递给子组件。
.