vue知识（二）组件初始化、父子组件传值、插槽

一、组件化开发思想

（1）现实中的组件化思想体现

• 标准
• 分治
• 重用
• 组合

（2）组件化规范（Web Components）

尽可能多的重用代码
自定义组件的方式不太容易（html、css、js）
多次使用组件可能导致冲突

Vue部分实现了规范
Web Components通过创建封装好功能的定制元素解决上述问题

（3）组件描述

将一个页面拆分成多个组件，每个组件都具有不同的功能
特点：可复用性、可维护、可组合

二、组件注册

（一）全局组件

（1）注册语法

Vue.components(组件名称,{data:组件数据，template:组件模板内容})

（2）组件用法

<div id="app">
	<btn-counter></btn-counter>
</div>

（3）组件注册语法

1. data必须是一个函数
2. 组件模板内容必须是单个根元素
3. 组件模板内容可以是模板字符串（模板字符串需要浏览器提供支持（ES6语法））
4. 组件命名方式

短横线方式 my-component
驼峰方式 MyComponent 在html中写会报错，可以在字符串中使用

（二）局部组件

局部组件只能在注册它的父组件中使用

var ComponentA={}; var ComponentB={};var ComponentC={};
new Vue({
	el:"#app",
	components:{
		//'名称':内容
		'component-a':ComponentA,
		'component-b':ComponentB,
		'component-c':ComponentC,
	}
})