Vue.js学习笔记：组件

一.组件？

1.组件 (Component) 是 Vue.js 最强大的功能之一

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

3.组件是自定义元素

二.使用组件

Vue组件的使用有2个步骤，注册组件，使用组件2个方面

1.注册

要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {  template: '<div>A custom component!</div>'})

注意：

① Vue.component(tagName, options)//注册全局组件： (组件名称 组件构造器)  

组件构造器：

//创建一个组件构造器  
var myComponent = Vue.extend({  

   template:'<div>A custom component!</div>'  
})  

Vue.component('my-component',myComponent)

②对于自定义标签名，小写并且包含一个短杠，尽管遵循这个规则比较好。

2.实例化

new Vue({  el: '#app'})

三.简单的例子

使用Vue，必须要引用它的js:import Vue from 'vue';

1.全局组件

<template>  <div id="app">      <h1>{{title}}</h1>      <my-component></my-component>  </div></template><script> import Vue from 'vue';Vue.component('my-component', {  template: '<div>A custom component!</div>'})export default {  name: 'app',  data: function () {    return {       title: '全局组件的使用'    }   }}</script>

2.局部组件

<template>  <div id="app">      <h1>{{title}}</h1>      <my-component></my-component>  </div></template><script> var Child = {  template: '<div>A custom component!</div>'}export default {  name: 'app',  data: function () {    return {       title: '局部组件的使用'    }   },  components: {'my-component': Child}}</script>

3.data传值（必须是函数）

<template>  <div id="app">      <h1>{{title}}</h1>      <my-component></my-component>      <my-component></my-component>      <my-component></my-component>  </div></template><script> import Vue from 'vue';var data = { counter: 0 }Vue.component('my-component', {  template: '<button v-on:click="counter += 1">{{ counter }}</button>',  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，  // 但是我们返回给每个组件的实例的却引用了同一个data对象  data: function () {    return {      counter: 0    }  }})export default {  name: 'app',  data: function () {    return {       title: '组件共享了同一个 data,增加一个counter不会影响其他组件'    }   }}</script>

四.定制组件的 v-model

一个组件的 v-model 会使用 value 属性和 input 事件，但是诸如单选框、复选框之类的输入类型可能把 value 属性用作了别的目的,model 选项可以回避这样的冲突：

Vue.component('my-checkbox', {  model: {    prop: 'checked',    event: 'change'  },  props: {    checked: Boolean,    // this allows using the `value` prop for a different purpose    value: String  },  // ...})<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码等价于：<my-checkbox  :checked="foo"  @change="val => { foo = val }"  value="some value"></my-checkbox>