Vue组件基础
1. 组件注册
组件需要注册后才可以使用。组件有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。
此外，使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。
<!-- 组件注册 -->
<body>
<div id="app">
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
<part-component></part-component>
<part-component></part-component>
<part-component></part-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//全局注册组件
Vue.component('global-component',{
template: '<div>这是全局组件的内容</div>'
});
var partComponent = {
template: '<div>这是局部组件的内容</div>'
}
var app = new Vue({
el: '#app',
//局部注册组件
components: {
'part-component': partComponent
}
})
</script>
</body>
上述代码中的template是DOM结构必须被包含的一个元素，并且其中如果不包含<div></div>，组件是无法被渲染的。
执行结果
Vue组件的模板在某些情况下会受到HTML的限制，比如<table>内规定只允许时<tr>、<td>、<th>这些表格元素，所以在 <table>内直接使用组件是无效的。这种情况下，需要使用is属性来挂载组件：
<table>
<!-- tbody在渲染时，会被替换为组件中的内容 -->
<tbody is="global-component"></tbody>
</table>
除了template选项外，组件中还可以使用如data，computed，methods等，但使用data时，必须为函数，然后将数据return出去：
<body>
<div id="app">
<my-component></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//全局注册组件
Vue.component('my-component',{
template: '<div>{{message}}</div>',
data: function() {
return {
message: '组件内容'
}
}
});
var app = new Vue({
el: '#app',
})
</script>
</body>
2. props传递数据
在组件中，使用选项props声明来自父组件的数据：
<!-- props声明来自父组件的参数 -->
<body>
<div id="app">
<my-component message="来自父组件的数据"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//全局注册组件
Vue.component('my-component',{
template: '<div>{{message}}</div>',
props: ['message'], //props可以是数组或对象
});
var app = new Vue({
el: '#app',
})
</script>
</body>
props中声明的数据与组件data函数中return的数据主要区别在于，props来自与其父组件，而data中的是组件自己的数据，作用域组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。
有时候，传递的数据不是写死的，而是来自于父组件的动态数据，这时可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件：
<!-- props动态参数 -->
<body>
<div id="app">
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//全局注册组件
Vue.component('my-component',{
template: '<div>{{message}}</div>',
props: ['message'], //props可以是数组或对象
});
var app = new Vue({
el: '#app',
data: {
parentMessage: "",
}
})
</script>
</body>
上述代码中如果<my-component :message="parentMessage"></my-component>这一行不适用v-bind的形式，即：<my-component message="parentMessage"></my-component>，则执行结果如下：
非v-bind执行结果
而使用v-bind的结果如下：
v-bind执行结果
可见，如果不适用v-bind，则传递的仅仅是固定字符串。
3. props数据验证
可以应用以下选项对数据进行验证：
-
type: 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。 -
default:any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 -
required:Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。 -
validator:Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。
参考
- 《Vue.js实战》
