2. 简单组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单

 <div class="app7">
      <component-item></component-item>
      <component-item></component-item>
    </div>

 Vue.component("component-item", {
        template: "<div>这里是一个模板</div>"
      });

var app7 = new Vue({
        el: ".app7",
        data: {
          message: [{ name: "蔬菜" }, { name: "蔬菜" }]
        }
      });

我们可以通过如上的方式创建一个模板，这个模板并没有传入参数，仅仅是将template中的html代码替换了定义好的标签。

我们也可以通过下列方式才使用模板——

<div class="app7-1">
      <component-item2 v-for="tips in message" v-bind:tips="tips"></component-item2>
    </div>

 Vue.component("component-item2", {
        props: ["tips"],
        template: "<div>{{tips.name}}</div>"
      });
var app71 = new Vue({
        el: ".app7-1",
        data: {
          message: [{ name: "蔬菜" }, { name: "水果" }, { name: "花生" }]
        }
      });

可以看到这里使用了for循环去加载模板，并将数组中的值传递给各个模板，最终循环显示出name后面的字符串。