vue之路之--Vue组件

“组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码”，设个是官网中对组件的评价，在这里也可以看出组件在vue中的地位......

组件当然是用来用的，但是在用之前你首先得定义（注册）一个组件，不然的话，你用什么？？

注册组件

组件的注册可以分为两种全局注册和局部注册，下面对两种注册方法进行一下分析和辨别：

1.全局注册：

注册方法是:Vue.component("tagName",option)

但是需要注意的是：
注册组件一定要在Vue实例初始化之前注册（你懂的），tagName（标签名）是将来你写在html中的标签名，options则是对该组件功能和内容的一些设置，是一个object对象，其中属性template值可以是包含内容的标签（组），举个栗子：

js部分：

// 注册组件；Vue.component("my-component",{template:"<div>hello,Vue组件！</div>"})

html部分

<div id="container"><my-component></my-component><br><i>{{strings}}</i><br><my-component1></my-component1></div>

审查完元素之后,你会发现--->

你会惊奇的发现外面的那一层自定义标签没了......

总而言之，从目前来看全局注册的组件可以在任何vue的环境中使用，几乎不受限制；

2.局部注册
注册方法不好说，反正就是作为Vue实例的一个属性来进行注册的，还是举个栗子吧！

js部分

// 局部注册;var vm = new Vue({el:"#container",data:{strings:"哈哈，终于见到你了！"},components:{"my-component1":{template:"<i>这里显示的是局部注册的组件</i>"}}})//实例2var vm1 = new Vue({el:"#picker",data:{datas:"这里是vue的另一个实例！"}})

其中components是作为实例的一个属性来的，同data属性一样其值是一个对象（你懂的），my-component1是标签名（组件名也可以），

template同全局的一样。

html部分

<div id="container"><my-component></my-component><br><i>{{strings}}</i><br><my-component1></my-component1></div><div id="picker">{{datas}}<br><my-component></my-component><br><my-component1></my-component1></div>

如果你审查一下元素，你会发现只有在#container中出现了你想要的结果，但是在#picker中却没有，这是为什么呢？，答案就是，my-component1只是在#container中进行了注册，因此组件只能在其所辖的元素的范围内起作用，这也是就是官网中所说的"通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用"吧

简而言之，局部注册的组件只可以在实例的父模板（el中设置的元素的内部）中使用，在其他实例中不可用，会报错。

data只能是function：

"通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。"这是官网上的原话，自己对其理解--通过Vue 构造器（new出来的实例）传入的各种选项(如methods，filter，datas等)大多数都可以在组件（子组件）里用。data 是一个例外，它必须是函数。这就意味着data的属性值必须是一个function，如果要参照Vue构造器中的

data属性，这个function应该要返回一个对象Obj（因为构造函数里面data选项的值就是一个对象,）作为容器来”装“在组件中所要展现的数据（不然的数据装在哪里？？），官网的例子比较有代表性------>

js部分

var data = { counter: 0 }Vue.component('simple-counter', {  template: '<button v-on:click="counter += 1">{{ counter }}</button>',  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，  // 但是我们返回给每个组件的实例却引用了同一个 data 对象  data: function () {    return data  }})new Vue({  el: '#example-2'})

html部分

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

此时当你点击的时候会发现三个button的值都会变，原因是无论点哪个button，counter都代表的是同一个数据，就是在实例化之前定义的那个变量里面的counter；

如何解决这个问题呢？？只需要稍作一下改变，return出来一个新变量即可.

data: function () {  return {    counter: 0  }}

乍一看没啥区别，但是其实每一次在初始化的时候counter的值都是独立的，因为上面的变化相当于：

data: function () {var a = {counter: 0}   return a}

每一次都会生成一个新的对象，所以每一次的变量都是不一样的