组件知识学习记录

什么是组件？
答：组件是可复用的 Vue 实例。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
(1）全局组件：

全局注册：
Vue.component('my-component-name', {
  // ... 选项 ...
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
---------------------------------------------------------
(2）局部组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
new Vue({
	el: '#app',
	  	components: {
	    	'component-a': ComponentA,
	    	'component-b': ComponentB
	  	}
	})
注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
var ComponentA = { /* ... */ }
var ComponentB = {
	components:{
	   'component-a': ComponentA
	}, 
}
----------------------------------------------------------
(3）父传子数据，组件用props进行添加属性方便子组件接收数据
    1.静态传送<blog-post title="My journey with Vue"></blog-post>
    2.动态传送
     		：prop 可以通过 v-bind 动态赋值
    <blog-post v-bind:title="post.title"></blog-post>
	任何类型的值都可以传给一个 prop，字符串，数字，数组，对象，布尔值，

	传入一个对象的所有 property
	如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

	post: {
	  	id: 1,
	  	title: 'My Journey with Vue'
	}

	<blog-post v-bind="post"></blog-post>
	等价于：

	<blog-post
	  v-bind:id="post.id"
	  v-bind:title="post.title"
	></blog-post>


	子传父使用$emit
---------------------------------------------------------
(4）
props属性验证
props:{
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      	type: String,
      	required: true
    },
    // 带有默认值的数字
    propD: {
      	type: Number,
      	default: 100
    },
    // 带有默认值的对象
    propE: {
      	type: Object,
      	// 对象或数组默认值必须从一个工厂函数获取
      	default: function () {
        	return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      	validator: function (value) {
       	 	// 这个值必须匹配下列字符串中的一个
        	return ['success', 'warning', 'danger'].indexOf(value) !== -1
      	}
    }
  }