vue组件学习（component）

vue组件学习（component）

如何定义组件
Vue.component({});

给组件命名
Vue.component(“name”,{});

组件的两大属性：template以及props
template:模板的意思，可以将你需要写的元素放入template中 ，例如：

运行结果如下：
由上图可见，template属性其实就是一个可以存放各种html标签的容器。
组件就大致相当于重新定义了一个html标签。（其实还是有区别的，哈哈）
只不过这个标签内可以定义更加丰富的html标签 ，甚至是一个html页面。

需要注意的是 模板元素需要放在被vue注册过的元素内。
比如上面这个例子中
id为 app 的<div>就被vue通过el属性注册了。
而组件<name></name>则放在这个<div>之中

props
通过学习，我将这个属性理解为接收参数的属性。
在vue中，组件和vue实例是不能直接传递参数的，这时，就需要props属性来帮忙了：

运行结果如下：

可以看见，我在vue实例定义的数组 通过v-for遍历渲染在页面上了。
那么props属性究竟有什么用呢？
刚刚我们已经讲过，vue组件和vue实例是无法直接沟通的
我们通过v-for 从vue实例中拿到items数组中的数据 ，然后通过v-bind将每一个数据与props属性定义的参数"child"进行绑定。
最后通过双大括号的方式显示在template中你需要数据显示的地方。