在应用的不同的部分定义成组件，这样可以更好的维护你的应用 .. 下面我们把页面上的这个评论项目定义成一个组件 ... 使用 Vue 的 component .. 先设置一下组件的名字，比如 comment ... 然后是一个对象，里面是这个组件的一些选项 ..

先添加一个 template 设置一下组件的模板 ... 一组 li 标签 ... 先包装一点静态的文字 ...

再去掉页面上的显示评论列表的 li 标签 ... 换成一组 comment .. 这个 comment 就是刚才我们定义的组件 ...

页面上会显示一个静态的文字 ... 周围是一组 li 标签 ..

这个评论组件里面要用到一些属性 ... 可以把它们放在 props 里面 .. 它的值是一个数组 .. 添加一个 comment ... 一会儿我们要在使用这个组件的地方把这个属性传递进来 ..

在这个组件的模板里面，我们现在就可以用一下 comment 这个属性了 ... 显示 comment 的 content 里的内容 ...

在使用这个组件的地方，先用一个 v-for 指令，循环一下应用里的 comments ，每次循环的项目的名字是 comment ...

接着再用一下 v-bind 绑定一个 comment 它的值会传递给组件 ... 这里可以使用 comment 来表示 ...

在页面上会显示评论的列表 ... 这个列表项目用了一个组件 ... 你可以在其它的地方重复的利用这个组件 ...