Vue的组件的概念与基本使用

什么是vue的组件（what）?

---

  组件(Component)是vue.js中很强大的一个功能，能够将一些可重用的代码进行封重用。全部的 Vue 组件同时也是 Vue 的实例，能够接受使用相同的选项对象和提供相同的生命周期钩子。
一句话归纳：组件就是能够扩展HTML元素，封装可重用的HTML代码，能够将组件看做自定义的HTML元素。

如何使用组件（how）?

---

• 前提条件: 使用组件名的时候是须要先实例化Vue的，由于组件如今是扩展在Vue中，想使用Vue中的组件就须要先实例化得到这个组件才可以使用

1. 建立组件

建立组件即在Vue构造函数中经过extend()方法添加该组件（ps：能够理解成在刚开学的时候，老师不认识你，可是知道有泡泡这我的）

2. 注册组件

注册组件即在Vue构造函数中经过一个属性名与之关联在一块儿，有点像var name='paopao';这个时候 temp就是泡泡了（ps：这个时候老师把花名册上的'泡泡'和人对应起来了） 组件的注册可分为全局注册与局部注册，区别：注册的地方不一致；全局注册就是只要是实例化Vue的范围均可以使用该组件，局部注册就是只能在某一个Vue实例的范围内使用该组件

• 全局注册（使用 Vue.component(tagName, options)）

//使用组件
  < div id="app">
     < my-component>< /my-component>
  < /div>
//确保在初始化根实例以前注册组件
Vue.component('my-component', {
  template: '< div> component test! < /div>'
})
// 建立根实例
new Vue({
  el: '#app',
  components: { App },
  template: ''
})
复制代码

最终渲染为：

< div id="app">
  < div>component test!< /div>
< /div>
复制代码

• 局部注册

每一个组件都注册到全局的方式显然很不合理，更多的时候采用的每每是局部注册的方式。能够经过某个 Vue 实例/组件的实例选项 components 注册仅在其做用域中可用的组件

var Child = {
  template: '< div>一个局部注册的组件!< /div>'
}
new Vue({
  components: {
  // < localRegistration>  只在父组件模板中才可用
    'localRegistration': Child
  }
})
复制代码

3. 使用组件

这个时候就能够在dom中添加所建立的组件名（这个时候你终于能够以'泡泡'的名义去作点什么事了，好比上课，去图书馆等）

Dom模版解析事项

---

   当使用 DOM 做为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，会受到 HTML 自己的一些限制，由于 Vue 只有在浏览器解析、规范化模板以后才能获取其内容。要特别注意的是，像 < ul>、< ol>、< table>、< select> 这样的元素里容许包含的元素有限制，而另外一些像 < option> 这样的元素只能出如今某些特定元素的内部。

例如(< my-row>为自定义的组件)：

< table>
  < my-row>< /my-row>
< /table>
复制代码

此时的自定义组件 < my-row> 被看成无效的内容，由于 Vue 只有在浏览器解析、规范化模板以后才能获取其内容。而此时的table标签尚未被解析，因此在往里面放入自定义组件的时候会致使错误的渲染结果。此时的解决方法是可使用特殊的 is 特性：

< table>
  < tr is="my-row">
< /table>
复制代码

!!! 若是使用来自如下来源之一的字符串模板，则没有此限制:

• < script type="text/x-template">
• JavaScript 内联模板字符串 (经过内联的方式使其一同进行加载)
• .vue 组件

例如：

new Vue({
   el: '#app',
   components:{
     'selectcomp':{
       template: ' < select> < optioncomp>< /optioncomp>< /select>'
      }
    }
  })
复制代码

Vue 实例时传入的选项中data 必须是函数

---

若是这样的写法：

data: {
   msg: 'Welcome to Your Vue.js App'
 }
复制代码

将会报错：

//Vue 会中止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。
 [HMR] Waiting for update signal from WDS...
vue.esm.js?efeb:591 [Vue warn]: The "data" option should be a function that 
returns a per-instance value in component definitions.
复制代码

举个例子来对比一下：

< div id="example">
  < simple-counter>< /simple-counter>
  < simple-counter>< /simple-counter>
  < simple-counter>< /simple-counter>

复制代码

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '< button v-on:click="counter += 1">{{ counter }}< /button>',
  // data 的确是一个函数了，所以 Vue 不会警告，
  // 可是咱们却给每一个组件实例返回了同一个对象的引用(此处是为了作对比)
  data: function () {
    return data
  }
})

new Vue({
  el: '#example'
})
复制代码

如今的结果是有三个能够计数的按钮，可是不论点击的是哪个，全部的按钮的所记数都会加1，由于每一个组件实例返回的是同一个对象的引用，不论哪一个按钮的对数据进行操做，都会影响到其余的按钮组件计数结果

//将其data的格式写成以下，此时每一个 counter 都有本身内部的状态了，都是独立存在的，
每一个组件返回的都是全新的数据对象：
data: function () {
  return {
    counter: 0
  }
}
复制代码

---

                                                                                    下一篇：组件间的数据传递