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')
在设置数据的时候或者获取变量、属性、方法时获取不到数据
报奇奇怪怪的错
一个组件
需要js/ts scss 样式需要动态生成 根据this.type生成,根据不同得到状态生成不同的样式 再加个name 在按钮加个属性 在vue中加入全局的属性,把button组件注册到全局,通过use 文字通过插槽生成,slot 触发事件 @click="handlerClick"
这是我参与「第五届青训营 」伴学笔记创作活动的第 八 天
禁用属性
: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去注册组件,使得全局可以使用
export default就可以全局使用
在入口文件中去导入
import * as components from './components';
这样就可以全部导入
在组件中写入v-bind="$"去继承腹肌中的所有属性
v-model去调用属性