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中你需要数据显示的地方。