VUE（三）

全局组件

image.png

我们之前点击提交的时候，数据在li标签里，现在我们把它变成一个组件，首先在script我们调用一个Vue.component方法，是Vue提供给我们创建一个全局组件的方法，我们组件的名字叫做TodoItem，这个组件里面我们可以写了一个template模板，我们可以写一个li标签，这样我们就创建了一个TodoItem的全局组件，这时我们就可以用<todo-item>这个标签了

父子通信

上面这个todo-item其实是全局的子组件，当我们想要显示内容的时，就要把内容传递个子组件，这时候要用到v-bind，是像子组件传一个绑定值的意思，我们就可以写v-bind:content="item"，意思就是把item通过v-bind的形式，传给这个todo-item，怎么传呢，就是通过content这个变量来传，那子组件如何接收这个内容呢，就是在components里面来写一个props，props的意思是从父组件接收一些内容，显然我们要接收content参数，这样子组件里就可以接收到外部传的content的值，content的值呢就是item，这个item的值又是List的每一项，这样，我们就可以直接在template里面写<li>{{content}}</li>了。

局部组件

image.png

只需要把局部组件注册到Vue实例里，我们写一个components，最好通过对象来注册，然后里面写上TodoItem。这样注册之后就可以了。

简单了解一下组件的概念，有待深入学习~