Vue组件和组件构造器

组件

Vue.component()

这里有一个 Vue 组件的示例：

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

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>，即Vue.component()的第一个参数。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

//注册组件
new Vue({ el: '#components-demo' })

组件构造器

Vue.extend()

extend创建的是一个组件构造器，而不是一个具体的组件实例，所以直接使用无法生效
组件构造器相当于Vue.component()方法的第二个参数部分

使组件构造器生效的常用方式有如下两种：

1. 注册

<div id="author"></div>

// 创建构造器
var au = Vue.extend({
  template: "<p><a :href='url'>{{ author }}</a></p>",
  data : function() {
    return {
      author : 'Li',
      url : 'http://www.baidu.com'
    }
  }
});
// 创建组件
Vue.component('au',au);
// 注册
new Vue({
  el:"#author"
})

2. 挂载

<div id="author"></div>

// 创建构造器
var au = Vue.extend({
  template: "<p><a :href='url'>{{ author }}</a></p>",
  data : function() {
    return {
      author : 'Li',
      url : 'http://www.baidu.com'
    }
  }
});
// 创建au实例并挂载到一个元素上
new au().$mount('#author');

组件传递参数

了解了组件和组件构造器的关系，此时应当关心如何给组件传递参数

使用props

<div id="author"></div>

var au = Vue.extend({
  template: "<p><a :href='url'>{{ author }} & {{ name }}</a></p>",
  data : function() {
    return {
      author : 'Li',
      url : 'http://www.baidu.com'
    }
  },
  props : ['name']
});
//使用propsData传递参数name
new au({propsData: {name : 'cj'}}).$mount('#author');