html5 公司网站,网站ui设计报价单,网站建设与推广论文,邯郸教育网站建设什么是组件
组件(Component)是Vue中最强大的功能之一#xff0c;每个Vue 文件就是一个个独立的组件#xff0c;组件也可以被其他组件调用#xff0c;形成嵌套关系#xff0c;大部分的应用都是由各类不同功能的小组件进行构建#xff0c;形成一个功能强大的大组件树系统每个Vue 文件就是一个个独立的组件组件也可以被其他组件调用形成嵌套关系大部分的应用都是由各类不同功能的小组件进行构建形成一个功能强大的大组件树系统如下图所示。 可以说组件是应用开发的核心是系统构建的基础其重要性不言而喻每个组件是功能可复用的独立的封装代码它可以像使用普通标签一样直接在模板中使用从而进一步扩展了HTML 标签它有下列二种定义方式。
单文件组件
单文件组件简称为(SFC)它是指在使用脚手架构建项目时自动生成的一个扩展名为.vue的单独文件而在这个文件中就是一个定义好的Vue 组件如代码所示。
templatediv{{ tip }}/div
/template
script
export default {name:Base,data() {return {tip: 今天的天气非常不错}}
}
/script
JavaScript 对象
除使用脚手架创建项目时自动定义 Vue 组件之外还可以在js文件中定义一个包含 Vue 特定选项的JavaScript 对象这也是定义了一个Vue 组件如下代码所示。
export default {data() {return {tip: 今天的天气非常不错}},template: div{{ tip }}/div
}
在上述js文件的代码中定义的组件默认是使用export default方法导出自己模板是一个内联的JavaScript字符串变量Vue 在执行时会自动编译它成为组件的模板部分。
组件使用
一个组件在使用之前必须先进行注册只有完成注册了Vue 才能在渲染时找到对应的功能模块因此组件的注册是组件使用的前提注册的方式分为两种一种是全局注册另一种是局部注册注册成功后组件就可以像普通标签一样使用了。 全局注册
全局注册组件的方式非常简单只需要调用Vue 应用实例中的component() 方法就可以注册一个在当前Vue应用实例中都可以使用的全局组件具体实现步骤如下
先定义一个名称为Global.vue用于全局注册的组件代码如下。
templatediv{{ tip }}/div
/template
script
export default {name: Global,data() {return {tip: 这是一个全局组件}}
}
/script
在main.js文件中调用component() 方法将定义的组件注册为全局组件代码如下
import { createApp } from vue
import App from ./App.vue
import Global from ./components/ch6/Global
let app createApp(App);
app.component(Global,Global);
app.mount(#app)
在任意一个组件如App.vue 中直接调用注册成功的全局组件代码如下
templateglobal /
/template
script
export default {name: App
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;
}
/style
需要说明的是在第2个步骤中调用Vue 应用实例化对象的component()方法时需传入两个参数第一个是指这个全局组件的名称第二个是指这个全局组件所对应的目标组件通常是已定义完成的组件。
此外component() 方法可以采用链式方式编写注册多个全局组件格式如下所示。
app.component(GlobalA, GlobalA).component(GlobalB, GlobalB).component(GlobalC, GlobalC)
最后各个被注册的全局组件之间也可以相互调用因此上述代码中的三个被注册的全局组件内部是可以相互访问的。 局部注册
全局组件虽然注册简单使用方便但在实际项目中存在以下几点不足
1)全局组件一旦注册完成即使不使用打包发布时并不会自动移除而是依然在打包生成的js文件中不利于打包文件体积的优化。
2)注册成功的的全局组件在大型项目的使用过程中依赖关系并不是很明确如果同时注册多个全局组件使用时不易定位某个组件不利于后期项目的维护和优化。
针对上述问题可以通过局部注册组件来解决相比于全局注册的组件局部组件必须在父组件中显式声明组件间的依赖关系更加清晰对打包文件的优化更加友好注册方式也更加简单只需要以下两个步骤。
先定义一个名称为Local.vue用于局部注册的组件代码如下。
templatediv{{ tip }}/div
/template
script
export default {name: Local,data() {return {tip: 这是一个局部组件}}
}
/script
在任意一个组件如App.vue 中导入新建的组件并使用 components 选项声明导入的组件完成局部组件注册的功能代码如下。
templatelocal/
/template
script
import Local from ./components/ch6/Local.vue;
export default {name: App,components: {Local}
};
/script
style
//省略样式代码
/style
需要说明的是在components配置属性中key名就是组件名可以使用简写方式也可以将对应的value值列出因此下列代码是等价的。
components: {Local}
等价于
components: {Local:Local}
此外局部注册的组件只能在注册的父组件中使用并不能运用到它的子组件或后代组件即局部组件只对显式的注册有效而对后代组件无效。
组件命名格式
在注册组件时有下列二种命名格式一种是短横线分隔(kebab-case)另外一种是首字母大写(PascalCase)接下面分别进行介绍。
短横线分隔
使用短横线分隔定义的组件在引用该组件时也必须使用短横线分隔例如使用短横线分隔定义了一个组件格式如下。
app.component(custom-component-name, {/* ... */
})
引用这个自定义组件时的书写格式必须是 。
首字母大写
使用首字母大写定义的组件在引用该组件时两种命名格式都可以使用例如使用首字母大写定义了一个组件格式如下。
app.component(CustomComponentName, {/* ... */
})
如果需要引用这个组件时既可以写成 格式也可以写成 格式。
需要说明的是官方提倡使用首字母大写格式因为它是一个合法的 JavaScript 标识符可以很容易地导入和注册到组件中同时开发工具也提供了很好的自动补全功能。
此外首字母大写的格式在模板中会更加明显地表明这是一个 Vue 组件而不是原生 HTML 元素可以更容易地将系统自带的 Vue 组件和自定义元素区分开。
