组件

69 阅读3分钟

SPA应⽤

SPA(单⻚应⽤)是⼀种⽹络应⽤程序,它在⽤户与应⽤程序交互时不需要重新加载整个⻚⾯。相反,它在初始加载时会下载所需的所有代码 - HTML、CSS、JavaScript等,并在⽤户与应⽤程序交互时动态地更新⻚⾯内容,从⽽提供更流畅、更快速的⽤户体验。

SPA应⽤通过JavaScript动态加载内容,使得⽤户可以流畅地与⽹站或应⽤程序进⾏交互,⽆需每次点击链接或提交表单时都重新加载整个⻚⾯。所以,SPA就像是⽹⻚版的魔术,通过优雅的技巧让⽤户体验更为流畅和令⼈惊叹。

组件介绍

概念:组件就是局部功能界⾯

作⽤:根据业务需求⾃定义组件,并实现组件复⽤

建议:组件在起名字的时候建议采⽤:公司-组件名的⽅法来命名,⽐如el-alert,如果是⾃⼰开发的组件,建议⽤:my-login这样格式来命名

注意:当使⽤kebab-case (短横线分隔命名) 定义⼀个组件时,你也必须在引⽤这个⾃定义元素时使kebab-case,例如 。

当使⽤PascalCase (⾸字⺟⼤写命名) 定义⼀个组件时,你在引⽤这个⾃定义元素时两种命名法都可以使⽤。也就是说 和 都是可接受的。注意,尽管如此,直接在 DOM (即⾮字符串的模板) 中使⽤时只有 kebab-case 是有效的。

使⽤步骤:

1. ⾃定义组件

2. 在被使⽤的地⽅引⼊并注册到components中

3. ⽤⾃定义标签,标签名字就是定义的组件名字

⽗组件向⼦组件传值

作⽤:⽗组件向⼦组件传递参数

步骤:

1.定义⼦组件

2.⽗组件中使⽤⼦组件

3.在引⽤⼦组件的时候将参数绑定在⼀个⾃定义的属性上去

4.⼦组件⾥接收传值

Tips:

1.⼦组件⾥设置接收哪些属性的传值(可⽤数组形式设置,也可以⽤对象形式设置,前⾯必须写的是props)

2.在使⽤对象形式设置时,可以设置type、default、required等

3.在使⽤对象形式设置时,参数值类型(即type)不是只能写⼀个,它可以写很多个,只需要⽤数组写即可

4.⼀般required和default只写⼀个,因为如果default存在,那么required设置true就没有意义了

5.如果⽗组件调⽤⼦组件时定义的属性格式是:kebab-case的类型,那么⼦组件接收的时候要写成驼峰格式接收与使⽤

⼦组件向⽗组件传值

作⽤:⼦组件向⽗组件传值

步骤:

1.⼦组件使⽤$emit来触发⽗组件的某个⽅法

2.⼦组件触发的这个⽅法在⽗组件引⼊⼦组件时候要以⾃定义事件的⽅式绑定

3.⽗组件中定义上⾯⾃定义事件触发的函数,执⾏逻辑