组件化开发思想及 vue 组件

搬过砖的程序猿
230 阅读1分钟

1.什么实际组件化开发

image.png

1.2组件化开发的好处

image.png

1.3vue中的组件化开发

image.png

1.4vue组件组成结构

image.png

2.组件的template节点

image.png

2.1 在tempalte中使用指令

image.png

2.2 在template中定义根节点

image.png

3.script中的节点

3.1 script中name的节点

image.png

3.2script中name的节点

image.png

3.3script中methods的节点

image.png

4style节点

二、组件注册的两种方式

image.png

组件可以相互的引用

image.png

全局使用组件

image.png

4.局部注册组件

image.png

![image.png](p9-juejin.byteimg.com/tos-cn-i-k3…

image.png

image.png

image.png

样式冲突解决

image.png

image.png

组件的props

image.png

什么是props

image.png

image.png

无法使用props中未声明的属性

image.png

动态绑定props的值

image.png

动态的绑定HTMLde class

image.png

image.pngp9-juejin.byteimg.com/tos-cn-i-k3…

image.png

什么是props验证

image.png

对象类型的props类型节点

image.png

props 验证

image.png

基础的类型检查

image.png

多个可能类型

image.png

prop必填校验

image.png

自定义验证函数

image.png

什么是计算属性

image.png

如何声明计算属性

image.png

计算属性的使用注意点

image.png

什么是自定义事件

image.png

自定义事件的三个使用步骤

image.png

触发自定义事件

image.png

监听自定义函数

image.png

自定义函数传参

image.png

为什么需要在组件上使用v-model

image.png

组件上v-model使用步骤（父传子）

image.png

组件上v-model使用步骤（子传父）

image.png

avatar
文章
阅读
粉丝