Vue.js实战第七章笔记（一）

7.1组件与复用
7.1.1为什么使用组件
组件可以在任何使用Vue的地方使用
7.1.2组件用法
创建Vue实例：

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

注册组件：
①全局注册

Vue.component('my-component',{
//选项
})

my-component就是注册的组件，自定义标签名称，推荐用小写+‘-’的形式命名，要在父实例中使用这个组件，必须要在实例创建前注册
使用组件：

<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
//选项
})
var app = new Vue({
el:'#app'
})
</script>

在组件选项中添加template就可以显示组件内容了：

Vue.component('my-component',{
template: '<div>这里是组件内容</div>'
})

template的DOM结构必须被一个元素包含，不带

是无法渲染的
渲染结果：

<div id="app">
<div>这里是组件内容</div>
</div>

②局部注册
局部注册的组件只能在该实例的作用域下有效。组件中也可以使用components来注册组件，使组件可以嵌套

<div id="app">
<my-component></my-component>
</div>
<script>
var Child = {
template: '<div>局部注册组件的内容</div>'
}
var app = new Vue({
el:'#app'，
component:{
'my-component':Child
}
})
</script>

7.2使用props传递数据
7.2.1基本用法
通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或者参数，子组件接收到后根据参数 的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。

<div id="app">
<my-component msg="来自父组件的数据"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['msg'],
template: '<div>{{msg}}</div>'
})
var app = new Vue({
el:'#app'
})
</script>

渲染结果：

<div id="app">
<div>来自父组件的数据</div>
</div>

props中声明的数据与组件data函数return的数据主要区别就是props的来自父级，而data中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。上例的数据msg就是通过props从父级传递过来的，在组件的自定义标签上直接写该props的名称，如果要传递多个数据，在props数组中添加项即可
动态传数据：

<div id="app">
<input type="text" v-model="parentMsg">
<my-component :msg="parentMsg"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['msg'],
template: '<div>{{msg}}</div>'
})
var app = new Vue({
el:'#app',
data:{
parentMsg:''
}
})
</script>

7.2.2单向数据流
prop作为需要被转变的原始值传入，用计算属性

<div id="app">
	<my-component :width="100"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['width'],
template: '<div :style="style">组件内容</div>',
	computed:{
		style: function(){
			return {
				width: this.width + 'px'
			}
		}
	}
})
var app = new Vue({
el:'#app',
})
</script>

7.2.3数据验证

Vue.component('my-component',{
props:{
//必须是数字类型
	propA: Number,
//必须是字符串或者数字类型
	propB: [String,Number],
//布尔值，如果没有定义，默认值就是true
	propC: {
		type: Boolean,
		default: true
	},
//数字，而且是必传
	propD: {
		type: Number,
		required: true
	},
//如果是数组或对象，默认值必须是一个函数来返回
	propE: {
		type: Array,
		default:function(){
		return [];
	}
},
//自定义一个验证函数
	propF: {
		validator:function(value){
			return value > 10;
		}
	}
})

验证的type类型可以是：
String,Number,Boolean,Object,Array,Function