vue.js.2x 组件

指令:辅助开发者更快捷渲染结构
组件:由三部分构成 (必须要有结构)
组件具有独立性
每个组件都有基础选项:(定义组件的逻辑/功能)

• data
• methods
• computed
• watch
• filters
  组件的通信:
• props接收外部传入的数据
• 自定义事件执行父组件事件（通知父组件）

组件

其他input标签
若想实现v-model效果可以添加model

//指定同步的值与对应的事件类型
//默认value input
model:{
	prop:"checked",
	event: "change"
}

建议input主键都加上model
非prop属性会被组件的根标签接受

局部注册组件

components: 注册局部组件(子组件)

$refs 得到当前组件范围内,绑定了ref属性的元素 / 组件实例对象

进阶

动态组件 is: 要渲染的组件名
<component :is=""></component>

在table标签里面组件会失效
可以通过把is绑定在tr等标签身上渲染组件

插槽

插槽允许在封装组件时,可以预留坑位,接收者向坑位填充内容
默认情况 组件标签内的内容会忽略

• 默认插槽 slot

<slot></slot> 组件标签内的内容会自动填充到slot标签里面
slot标签内面可以写内容 当组件标签没提供内容时 会启用slot里面的

• 具名插槽

<slot name="chacao"></slot>
使用具名插槽时,需要搭配template标签
这里提醒一下 template 还有占位作用
<template v-slot:chacao>内容.......</template>
v-slot与上面slot标签的name绑定
v-slot可以简写为#

• 作用域插槽

<template v-slot:chacao="slotProps">
slotProps会将slot上的动态属性以对象的形式放在slotProps里面
slotProps是变量名可以改变 所以可以直接改成对象接收
`