组件

基础介绍

参考：Vue 组件_哔哩哔哩

• 组件本质上是可复用的Vue实例，所以在内部同样有data，methods等属性
• 区别是：没有挂载的声明，不存在el这样的挂载选项；

template——定义挂载Dom，也可以理解为设置组件结构，最终被引入根实例

注意：template定义的结构只能有一个根元素（即所有的内容都包含在一个Dom元素里）

props——自定义组件的属性的数组，方便其他组件传值，类似接口的的形参，用来接收数据

data——组件里的data要封装在一个方法里，是因为要区分全局的变量的定义,确保组件定义的变量只能在组件内部调用

用途

1. 用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装成一个整体
2. 提高功能的复用性、可维护性，更好专注业务逻辑

形式

通过组件名作为Html自定义标签名

		

			
			普通Html标签
			
			
		

全局注册

• 全局注册的组件在注册后可用于任意实例或组件里
• 全局注册必须设置在根Vue实例创建之前

组件命名规则

定义有两种规则

1. kebab-case: my-component
2. PascalCase: MyComponent

Vue.component('MyCom',{/*选项对象*/});
Vue.component('my—com',{/*选项对象*/});

应用规则

在Dom里只能采用kebab-case: ' my-component'

Demo：

		

			
			普通Html标签
			
			
		

			Vue.component('MyCom',{
				template:`
这里是结构最简单的组件
`
			});

单向数据流

1. 父子间组件的所有prop都是单向下行绑定的。包含两层含义

   • 传值只能父组件向子组件传值
   • 子组件的变化不能反向影响父组件的数据

   父组件向子组件传值Demo

2. 如果子组件要更改prop参数接收到的数据，应当存储在data中后操作

3. 如果prop为对象或者数组时，子组件操作会影响父组件的状态。

因为当prop为对象或者数组时，传递的是对象或者数组的引用，所以父子组件操作的引用指向的是同一对象或数组，任一一方改变都会真实改变这个对象或者数组的值

			{{student.sname}}:{{student.age}}
			
           
		

效果图：