这么久才想起来，没有写组件的部分，嘻嘻

初始化一个新项目，啥都不要

先看看文档里是怎么说的

https://cn.vuejs.org/v2/guide/components.html

分析实例代码里的组件

• 我们示例代码里，就有用到组件哦

  
  
  App.vue
  
  

  这里就是引入Hello.vue，然后注册为组件，就可以在template 中使用祖册的标签了

• 那我们也来改造改造这个Hello的内容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div style="color: #dddddd;background-color: #343434;margin: auto 20px;padding:60px;">
      <div>
        <h2>{{title}}</h2>
      </div>
      <div style="padding: 10px;">
        {{desc}}
      </div>
      <div>
        ![](img)
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title:"biaoti",
      desc:'jianjiejianjeijianjie',
      img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845565&di=6daec59e4b89bd0c0a4ef5a7e9de0212&imgtype=0&src=http%3A%2F%2Fimg05.tooopen.com%2Fimages%2F20150819%2Ftooopen_sy_138946578587.jpg"
    }
  }
}
</script>

现在的效果是这样的

效果

• 你一定发现了，我们使用这个组件的之后，是用的组件里的值，也就是说，我们调用组件的时候，没法给他赋值，没法改变这个组件的内容，那么如何解决这个问题呢？

  
  
  文档里
  
  

  原来，我们可以使用prop来给子组件传值，那我们来试吧！

• 第一步，先写props，然后把data里的几个放到App.vue里的data里去，然后在App.vue里Hello标签的地方写数据：

  
  
  第一步：Hello.vue
  
  
  第二步：App.vue
  
  
  第三步：App.vue
  
  

  来看看效果：

  
  
  嘻嘻

这时候，如果我们从后端拿到了一个这种图文列表，现在如要循环输出这些列表，该怎么实现呢？

循环输出图文列表

• 首先准备一下数据，我们定义一个数组

data(){
      return{
        list:[
          {title:"标题1",
            desc:'简介1',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845565&di=6daec59e4b89bd0c0a4ef5a7e9de0212&imgtype=0&src=http%3A%2F%2Fimg05.tooopen.com%2Fimages%2F20150819%2Ftooopen_sy_138946578587.jpg"
          },
          {title:"标题2",
            desc:'简介2',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498467092336&di=d391de70a8b8f35716bfbb0bd10390dc&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3748609901%2C1382452034%26fm%3D214%26gp%3D0.jpg"
          },
          {title:"标题3",
            desc:'简介3',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845565&di=cd0d65df24c402634c7ab801063d9ce4&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_thumb%2F201507%2Fm2015070219270251.jpg"
          },
          {title:"标题4",
            desc:'简介4',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845550&di=25d1d9e3404eeeab47dbe7b2183ea132&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20160330%2Ftooopen_sy_157749743148.jpg"
          }
        ]
      }
  }

• 然后我们来写循环：

<template>
  <div id="app">
    ![](./assets/logo.png)
    <div v-for="item in list">
      <hello :title="item.title" :desc="item.desc" :img="item.img"></hello>
    </div>
  </div>
</template>

这里用v-for来遍历list数组

• 来看看效果

  
  
  哈哈

--

以上就是写一个组件的简单步骤，后边的开发中，经常需要这么做。特别是数组的循环输出，更是十分常用哦。
关于组件，还有很多技巧，大家需要去文档里，仔细的把组件部分过一遍哦。

结束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}