Vue学习之组件基础

上一篇：Vue学习之表单输入绑定

基本实例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})

组件是可复用的 Vue 实例。

  
  


new Vue({ el: '#components-demo' })

data 必须是一个函数

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

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

有两种组件的注册类型：全局注册和局部注册。

//全局注册
Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data中的值一样。
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

常用的是在prop传递一个对象，这样逻辑会简单很多。

通过事件向父级组件发送消息

等价于

Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})

通过插槽分发内容

Vue.component('alert-box', {
  template: `
    

      Error!
      
    
  `
})

  Something bad happened.

动态组件

可以通过 Vue 的 元素加一个特殊的 is特性来实现。