提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

对比props

对比 Props
2023-09-11 14:19:07 时间

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的值，当父级数据变化时，会传递给子组件。

 

 

 

.

相关文章