【原】vue从入门到学会第七天--------组件中

　　一、前言

　　上篇文章我们讲到了如何注册组件并使用这些自定义的组件，本篇文章我们来讲讲如何具体使用这些组件的部分功能。

　　二、组件的复用

　　之所以使用组件，是因为我们可以让组件更为灵活，支持更多的样式，更快生成想要的功能界面。组件在传递数值的时候和vue实例不一样，它的data属性要求必须是一个函数，如下：

　　data:function(){

　　return{

　　list:["水浒传","红楼梦","三国演义","西游记"]

　　}

　　}

　　组件除了不需要给他el属性外，其它的基本都可以设置，比如我们还可以设置方法，如下：

　　

　　此时我们通过手动挂载并将这个组件应用到了dom中。

　　三、组件的属性

　　我们都知道组件其实就是一些自定义的标签的集合，我们不光可以将这些内容展示，还可以给他们一些属性，这个时候需要我们使用到props这个属性，如下：

　　

　　现在我们虽然创建了这些属性，不过我们此时的属性没有给他一些规范，这里我们其实还可以定义属性的类型和规则，如下：

　　

　　类型一般有如下几种：

　　String

　　Number

　　Boolean

　　Function

　　Object

　　Array

　　类型可以是单个，也可以是多个，如下：

　　

　　此时咱们不需要给数字类型动态绑定属性就能用了。

　　四、自定义组件的v-mode

　　前面我们提到过v-model这个指令，他可以实时输出文本框的内容，主要用于表单元素，会产生名为value 的属性和名为 input 的事件，如下：

　　

　　但是由于 v-model 默认传的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用model选项，model 选项可以指定当前的事件类型和传入的 props。如下：

　　

　　还可以将它封装为组件，如下：

　　

　　五、总结

　　本文主要讲到了如何打造一个功能更为完善并且支持和覆盖率更为广泛的多元化组件，下篇文章咱们就正式踏入组件的主题-------组件交互和通信。