8. 组件定义使用component --(1)

vue 官网 组件

组件

拥有专属 的html+js+css+数据的可重用的独立的页面功能区域

组件的分类

1. 根组件：

new Vue()。整个页面甚至整个项目只有一个new vue() 监控全局

2. 全局组件：

Vue.component()。可以放在任何位置，没有限制

3. 子组件

规定只能放在指定父组件范围内使用的组件

组件定义

组件名大小写

Vue.component('my-component-name', { /* ... */ })
// 使用：<my-component-name>

Vue.component('MyComponentName', { /* ... */ })
//使用： <my-component-name>

全局注册

Vue.component('组件名', {
  template: `组件的HTML片段`,
  data(){ 
	return { 
		// 
	}
	},
	// ...methods、watch、computed、钩子函数....
}
)

使用：

<组件名></组件名>

局部注册

var 组件名 = {
  template: `组件的HTML片段`,
  data(){ 
	return { 
		// 
	}
	},
	// ...methods、watch、computed、钩子函数....
}

使用：

<script>
	export default{
		components: { 
			子组件对象名:组件名,
			//组件名, 使用⇒ <组件名></组件名>
		 }
		
	}
</script>

页面渲染:

<子组件对象名></子组件对象名>

一般使用

1. 创建一个复用的A.vue组件

<template>...</template>
<script>...</script>
<style>....</style>

3. 需要使用页面引入：

<script>
import A from 'A.vue组件路径'
export default{
    components:{
        A
    }
 }
</script>

4. 页面使用

<a></a>

组件化开发的好处

1. 便于多人协作开发，提高开发效率
2. 松耦合，一人出错，不影响全局

操作：

每拿到页面后，按 位置、功能、是否重用 3个原则 划分组件区域

组件中的data是函数

1. 只有函数才可以反复调用
2. 每次调用都创建新的对象的副本
3. 避免组件间数据冲突