Vue.js学习笔记（3）-Component

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件和Vue实例实际上没有本质上的区别，一个组件就是一个实例。而除了根实例外，每一个组件都会有自己的父组件。而相对于父组件的就是子组件，这可以理解为类似类的派生与继承的关系。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。根实例就是这棵组件树的入口，而其他组件就是构成这棵树的枝叶。只有创建了根实例才能够使用这些自定义的组件。

要使用自定义组件必须先进行注册。组件的注册分为两种方式，一种是全局注册，另一种是局部注册。如果是全局注册，那么他的父组件就是根实例，如果是局部注册，那么他在哪一个组件中注册，那么该组件就是他的父组件。

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

全局组件

所有实例都能用全局组件。

<div id="app">
    <test></test>
</div>
 
<script>
// 注册
Vue.component('test', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<div id="app">
    <test></test>
</div>
 
<script>
var Child = {
  template: '<h1>局部组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    'test': Child
  }
})
</script>

虽然父组件和子组件之间存在着包含关系，但是这并不意味着他们的数据可以直接互相使用。

Prop

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

在这个例子当中，我一开始产生了疑问，为什么message说是父组件的数据，但是却没有在子组件以外的地方发现他。后来我发现，这应该是因为全局注册组件是，默认根实例是他的父组件，而这个父组件是不会显示出来的，其实真正的形式应该是类似这样子的:

    <root>
    <child msg="hello world"></child>
    </root>

child相对root来说是子组件，而 msg 这个变量是存在于父组件内的，应该属于父组件里的数据，虽然这个变量不是初始化就定义了的

动态 Prop

其实，我们也可以不用这么隐晦的方法来写这段代码，如果像下面这么写，可能会容易理解一点：

<div id="app">
	<child v-bind:message="mymessage"></child>
</div>

<script>
Vue.component('child', {
  props: ['message'],
  template: '<p>{{ message }}</p>'
})
new Vue({
  el: '#app',
	data:{
	mymessage:"hello"
},
})
</script>

如果我们想使父组件的数据，则必须先在子组件中定义props属性，然后再通过v-bind 把父组件和子组件的数据绑定起来，当父组件数据发生变化，那么子组件也会对应的发生变化。

但是要注意的是，虽然v-bind是双向绑定数据，但是在这种情况下，prop属性是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

其中

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

是子组件的数据，为什么要这么写呢？

因为不使用return包裹的数据会在项目的全局可见，会造成变量污染   使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

子组件通过emit来触发事件，而父组件通过v-on来监听子组件的自定义事件。