2019-11-18

组件应用构建和props的使用想法
[链接](https://cn.vuejs.org/v2/guide/index.html
需要自己的一些想法
props的使用,是为了从父作用域将数据传到子组件中
index.html

<div id="element">
  <ol>
    <todo-item
       v-for="item in groceryList"
       v-bind:todo="item"
       v-bind:key="item.id" 
      ></todo-item>
  </ol>
</div>

js

Vue.component('todo-item',{
  props:['todo'],
  template:'<li>{{ todo.text }}</li>'
})

let vm = new Vue({
  el:"#element",
  data:{
    groceryList:[
      {id:0,text:'跑步'},
      {id:1,text:'吃饭'},
      {id:2,text:'锻炼'}
    ]
  }
})

自我理解,props,可以将vm中的数据传递到组件中,子组件中通过props,借助v-for命令将其中的值复制到子组件中,基本流程就是v-for遍历groceryList,将遍历后的内容复制到props中的todo,在template中将操作的数据显示出来

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 首先看看PureComponent使用示例 在上面的代码中,Child是一个子组件,它接收从父组件传来的一个pro...
    正义国王阅读 320评论 0 0
  • 漫步晚秋 第十七章 杨晓倩来到了伍慧清的水稻田,她笑着对她说:“慧清妹妹,姐姐是干过农活的,有什么活让姐姐来干?”...
    刘老师_9e2c阅读 280评论 0 0
  • 第二十二题:二叉搜索树的后续遍历序列:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则输出...
    此广告牌招租啊阅读 72评论 0 0
  • 又是一个高考季,莘莘学子们经过十二年的寒窗苦读,考入自己理想的大学,踏入人生路程的转拆点,实现人生之梦想,咫尺可待...
    zwj发如雪阅读 237评论 3 9
  • 对联,是中国传统文化瑰宝,是中国的传统文化之一。对联又称楹联或对子,是写在纸、布上或刻在竹子、木头、柱子上的对偶语...
    随心而动自由呼吸阅读 227评论 0 5