Vue 组件

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件

一.概述

组件可以简单的理解为模块化的单元，是vue.js最强大的功能之一，是html、css、js等的一个聚合体，封装性特别强。可以解决某些功能，页面等频繁调用，提高代码的重用性。

在vue环境下搭建项目，每一个组件都是一个单独的文件，但最终运行都会放在一个页面上
通过vue制作单页面应用程序(spa)

二.组件构建

组件都有的三步骤：声明组件、注册组件、 使用组件
全局组件除外，全局组件声明时已经注册了 (vue实例其实就是最大的根组件)

1.全局组件

将组件注册到根实例(根组件)上，那么这个组件就是全局组件。全局组件可以被任意使用。
在不同作用域下都可以使用的组件

语法格式:

app.component('组件名称',{组件内容})

示例:

app.component('hello',{
	template:`
		<div>{{name}}</div>
	`,
	data(){  //这边也是可以加data以及其他的各种主属性例:methods、computed
		return {
			name:"Hello,Vue"
		}
	}
})
/********* 使用 **********/
// 自定义的标签，在vue项目中，称为组件
<hello></hello>

↓

浏览器结果

2.局部注册

将组件注册到某个组件的内部，通过 components 属性完成
局部组件只能在当前注册的组件使用

示例:

let app = Vue.createApp({
	component:{
		"my-hello":{
			template:`
					<button @click="count++">{{count}}</button>
				`,
				data(){
					return{
						count:100
					}
				}
		}
	}
	
})

↓ 浏览器结果

3.组件的一些属性

1> 组件名
	组件名称两种风格:
	>  my-button (推荐)
	>  MyButton
2> 组件中第二个参数属性
	- template 定义组件的结构样式  注意 ： 组件可以有多个根节点，尽量就一个
	- 与 vue示例中的可以写的属性一样，并且，每个组件都是一个独立的作用域，都会
	  维护自己的状态，不必担心起冲突

二、props属性

组件与组件之间不是完全独立的，而是有交集的，组件与组件之间可以传递数据，通过props属性可以让子组件接收父组件传递过来的数据

1.组件传递数值—(父传子)

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
例如:

let app = Vue.createApp({ // 注册组件
	component('post',{
		props:['title'],
		template:`<h4>{{title}}</h4>`
	})
})

// 组件使用
<div>
	<post title=" Hello Vue "></post>
	<post title=" Hello Web "></post>
	<post title=" Hello World "></post>
</div>

通过v-bind可动态传递prop

无论是静态绑定还是动态绑定都遵循单向数据流通规则:所有的prop都使其父子prop之间形成了一个单向下行绑定:父级prop的更新会向下流向到子组件中，但是反过来则不行。这样会防止从子组件意外变更到父级组件的状态，从而导致应用的数据流向难以理解
例如:

//组件内使用父级传输的值
porps:['count'],
template:`
	<button @click="count++">{{count}}</button>
`
//父组件传值
<my-button :count='1'></my-button>

当点击按钮时，不会改变数字；因为子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据

2.关于props的使用

props用来传递一个初始值，子组件希望作为本地的prop数据使用，在本地定义一个数值，作为prop的初始值

例如:

props:['count'],
template:`
	<button @click="counter++">{{counter}}</button>
`,
data(){
	return{
		counter : this.count
	}
}

在本地中存入存入数据作为初始值使用

3.关于props传递时的类型

type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组

default：指定默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个函数返回。

required：Boolean 用户定义该 prop 是否是必填项。

validator：Function

4.监听prop变化

如果来自父组件的prop发生了变化，在子组件生命周期beforeUpdate、updated能够监听到，通常子组件监听数据变化用watch监听数据变化

5.非Prop的 Attribute

指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。

<my-btn :active="active" class="article" className="btn"/>

↓
class将会自动挂载到子组件组件的组件根元素上，组件可以接受任意的 attribute

禁用Attribute

inheritAttrs: false 选项不会影响 style 和 class 的绑定。

通过inheritAttrs: false 和 组件的$attrs，可以手动决定 attribute 被赋予哪个元素

---

总结