Vue太难啦！从入门到放弃day04——Vue组件

前言

恰逢周末休息了两天，所以没有更新，各位莫怪，今天周一又开始努力学习Vue了！今天学的是Vue组件，干就完了，奥利给！！

---

---

一、Vue组件注册

1.1 全局组件注册语法

Vue.component('button-counter', {
	data: function(){
		return {
    		count: 0
		}
	},
	template: '<button @click="handle">点击了{{count}}次</button>',
	methods: {
		handle: function(){
    		this.count += 2;
		}
	}
})

注意：全局组件注册后，任何vue实例都可以使用

1.2 全局组件使用方法：

<div id="app">
	<button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
</div>
    
注意：全局组件可多次复用，组件之间相互独立

1.3 组件注册注意事项：

    1. data必须是一个函数
    2. 组件模板内容必须是单个根元素
    3. 组件模板内容可以是模板字符串
    4. 如果使用驼峰式（ MyComponent ）命名组件，只能在字符串模板中使用
    5. 在普通的标签模板中，必须使用短横线（ my-component ）的方式使用组件

1.4 局部组件注册

可以在vue实例中的components属性中注册局部组件
局部组件注册后只能在当前注册它的vue实例中使用

<script>
// 定义组件的模板
var Child = {
    template: '<div>A custom component!</div>'
}

new Vue({
	//局部注册组件
	components: {
   		 // <my-component> 将只在父模板可用 一定要在实例上注册了才能在html文件中使用
    	'my-component': Child
	}
})
</script>
        
<div id="app">
	<my-component></my-component>
</div>

二、组件间数据交互

2.1 父组件向子组件传值

2.1.1 子组件内部通过props接收父组件传递过来的值

Vue.component('menu-item', {
	props: ['title', 'content'],
	data: function() {
		return {
			msg: '子组件本身的数据'
		}
	},
	template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
});

2.1.2 父组件通过属性将值传递给子组件

<menu-item title='来自父组件的值'></menu-item>
<menu-item :title='ptitle' content='hello'></menu-item>

2.1.3 props属性命名规则

    在props中使用驼峰形式，模板中需要使用短横线的形式 
    字符串形式的模板中没有这个限制

2.1.4 props可以传递的属性值类型

    字符串 String 
    数值 Number    
    布尔值 Boolean    
    数组 Array 
    对象 Object

2.2 子组件向父组件传值

2.2.1 子组件通过自定义事件向父组件传递信息

注意：子组件用 $emit() 触发事件，$emit() 第一个参数为 自定义的事件名称，第二个参数为需要传递的数据 

<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>

2.2.2 父组件监听子组件的事件

<div id="app">
	<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
	<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>

handle: function(val){
	// 扩大字体大小
	this.fontSize += val;
}

2.3 非父子组件间传值

        非父子组件之间传递数据需要借助于事件中心，通过事件中心传递数据
        提供事件中心：var hub = new Vue();
        
        传递数据方：通过一个事件触发hub.$emit(方法名，传递的数据) 
        接收数据方：通过mounted(){} 钩子中 触发hub.$on()方法名
        
        Vue.component('test-tom', {
			data: function(){
				return {
					num: 0
				}
			},
			template: `
				<div>
				<div>TOM:{{num}}</div>
				<div>
				<button @click='handle'>点击</button>
				</div>
				</div>
			`,
			methods: {
				handle: function(){
					hub.$emit('jerry-event', 2);
				}
			},
			mounted: function() {
				// 监听事件
				hub.$on('tom-event', (val) => {
					this.num += val;
				});
			}
		});
        
        销毁事件：通过hub.$off()方法名销毁之后无法进行传递数据：hub.$off('tom-event');

三、组件插槽

3.1 组件插槽的作用

    组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
    组件插槽就是父组件给子组件传递内容

3.2 组件插槽基本用法

       Vue.component('alert-box', {
			template: `
				<div>
					<strong>ERROR:</strong>
					<slot>默认内容</slot>
				</div>
			`
		});

这里的所有组件标签中嵌套的内容会替换掉子组件中的slot，如果不传值则使用 slot 中的默认值
	<div id="app">
		<alert-box>有bug发生</alert-box>
		<alert-box>有一个警告</alert-box>
		<alert-box></alert-box>
	</div>

3.3 具名插槽用法

    使用slot中的 "name" 属性绑定元素 指定当前插槽的名字

3.4 作用域插槽用法

    应用场景：父组件对子组件加工处理，既可以复用子组件的slot，又可以使slot内容不一致

---

总结

组件是Vue中非常重要的语法，有点像后端的api，在项目中使用组件可以增加代码的可读性和逻辑性，值得学习！