大项目学习vue3.0(二)|青训营笔记

708 阅读1分钟

VueCompilerError: Element is missing end tag.

因为标签未闭合

SFC介绍

一个 Vue 单文件组件 (SFC),通常使用 *.vue 作为文件扩展名,它是一种使用了类似 HTML 语法的自定义文件格式,用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

每一个 *.vue 文件都由三种顶层语言块构成:<template><script> 和 <style>,以及一些其他的自定义块:

  • 每个 *.vue 文件最多可以包含一个 <script> 块。(使用 <script setup> 的情况除外)

预处理器

<script lang="ts"> // use TypeScript </script> 代码块可以使用 lang 这个 attribute 来声明预处理器语言,常见的在 <script> 中使用 TypeScript: 当 <style> 标签带有 scoped attribute 的时候,它的 CSS 只会影响当前组件的元素

问题

Cannot set properties of undefined (setting 'name')

在设置数据的时候或者获取变量、属性、方法时获取不到数据

image.png 报奇奇怪怪的错

一个组件

需要js/ts scss 样式需要动态生成 根据this.type生成,根据不同得到状态生成不同的样式 再加个name 在按钮加个属性 在vue中加入全局的属性,把button组件注册到全局,通过use 文字通过插槽生成,slot 触发事件 @click="handlerClick"

这是我参与「第五届青训营 」伴学笔记创作活动的第 八 天 image.png 禁用属性 :disabled="disabled || loading" 外部传入disable属性 把写好的组件先导入出去,通过Vue. 在入口文件中去导入 const install = function (app: App): void { Object.entries(components).forEach(([key, value]) => { app.component(key, value); }); }; 分别去注册 `export const EchoIcon = withInstall(icon);

export default EchoIcon;` 每个组件中的index.ts去注册组件,使得全局可以使用

image.png export default就可以全局使用 在入口文件中去导入 import * as components from './components'; 这样就可以全部导入 在组件中写入v-bind="$"去继承腹肌中的所有属性 v-model去调用属性