Vue 组件注册 & 小技巧 & props

产生原因

提高代码复用性

使用方法

全局注册(用的少)

Vue.component(tag, {
  template: '<div>我是全局注册的组件</div>'
})

优点：所有的 Vue 实例都能使用；
缺点：权限太大，容错率降低。

局部注册

<div id="app">
  <componentName></componentName>
</div>

// js
var app = new Vue({
  el: '#app',
  data: {},
  components: {
    'componentName': {
	  template: '<div>我是局部注册的组件</div>'
	}
  }
})

Vue 组件的模板在某些情况下会收到 html 标签的限制，比如 <table> 中只能含有 <tr>、<td> 和 <tbody> 等标签，所以将组件直接放在 table 中使用是无效的，此时需要用 is 属性来挂载组件。

<table>
  <tbody is="componentName"></tbody>
</table>

打开浏览器你会发现 <tbody> 标签被组件替换。

组件使用的小技巧

1. 使用小写字母加 - 进行命名；
2. template 中的内容必须被一个 DOM 元素包裹；
3. 在组件的定义中，除了 template 之外的其他选项：data、computed、methods等；
4. data 必须是一个方法。

// 实现两个按钮点击自身++互不干扰
<div id="demo">
  <plus-btn></plus-btn>
  <plus-btn></plus-btn>
</div>

// js
var app = new Vue({
  el: '#demo',
  data: {

  },
  components: {
    'plus-btn': {
       template: '<button @click="count++">{{count}}</button>',
	   data: function() {
	     return {
		   count: 0
        }
      }
    }
  }
})

使用 props 传递数据

父组件向子组件传递数据

<div id="app">
  <child-component msg="我是父组件传递的内容"></child-component>
</div>

<script>
  var app = new Vue({
    el: '#app',
    components: {
      'child-component': {
	    props: ['msg'],
        template: '<div>{{msg}}</div>'
      }
    }
  })
</script>

1. 在组件中使用 props 来从父组件接受参数，注意：在 props 中定义的属性，都可以在组件中直接使用；
2. props 中定义的属性来自父级，而 data 中 return 的数据就是组件自己的数据，两种情况作用域都是组件本身，可以在 template、computed 和 methods 中直接使用；
3. props 的值有两种，一种是字符串数组，一种是对象；
4. 可以使用 v-bind 动态绑定父组件内容。

<div id="app">
  // 使用 v-bind 可以自动检测传递的数据的类型，下面也可以是布尔值和对象
  <child-component msg="[3,6,9]"></child-component>  // 7
  <child-component :msg="[3,6,9]"></child-component>  // 3

  // 使用 v-bind 进行动态的数据绑定
  // 把 input 中的 msg 传递给子组件
  <input type="text" v-model="parentMsg">
  <bind-component :msg="parentMsg"></bind-component>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
	  parentMsg: ''
    },
	components: {
	  'child-component': {
		props: ['msg'],
		template: '<div>{{msg.length}}</div>'
	  },
	  'bind-component': {
		props: ['msg'],
		template: '<div>{{msg}}</div>'
	  }
	}
  })
</script>