8-Vue组件基础

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：




    
        
        组件基础

组件能够复用的原因：
每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

注意：一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝




    
        
        prop

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

单个根元素




    
        
        prop

监听子组件事件




    
        
        prop

当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

完整demo如下：




    
        
        prop

或者，如果这个事件处理函数是一个方法：那么这个值将会作为第一个参数传入这个方法




    
        
        prop

在组件上使用 `v-model`

v-model本身就是一个利用叫value的prop和叫input的自定义事件。所以完全可以自己写，因为单选，复选等类型的输入控键，会使用value特性用于其他目的。




    
        
        在组件上模拟v-model
        
    
        
            
            {{ searchText}}

关于event是触发的事件，这里是在输入框输入的动作。

$event.target是这个动作作用在哪个元素上。target特性返回被事件激活的元素。这里是输入框input元素。

value指的是input中的value特性，即输入的内容。

通过插槽分发内容




    
    
    
    Document


    
        
            Something bad happened.

动态组件



  
    
    
    
    动态组件Tab

上述内容可以通过 Vue 的元素加一个特殊的 is 特性来实现：

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如

这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：