浅析Vue单文件组件与非单文件组件使用方法
更新时间：2022年12月21日 12:01:33 作者：小五ccc
这篇文章主要介绍了Vue单文件组件与非单文件组件使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
单文件组件：一个文件中只包含一个组件，后缀为.vue（常用）
<template>
<!-- html部分 -->
<div>
<p class="title">{{name}}</p>
</div>
</template>
<script>
// js部分
export default {
data() {
return {
title: '这是标题'
}
}
}
</script>
<style>
/*css部分*/
.title {
font-size: 24px;
color: orange;
}
</style>
非单文件组件：一个文件中包含有多个组件，后缀为.html
在非单文件组件中“定义、注册、使用”组件
【下例中将header-com注册为局部组件、footer-com注册为全局组件】
<div id="root"> <!-- 使用局部组件 --> <header-com></header-com> <!-- 使用全局组件 --> <footer-com></footer-com> </div>
// 定义组件
const header = Vue.extend({
template: `
<div id="header-container">
{{title}}
</div>
`,
data() {
return {
title: '这是标题'
}
}
});
// 定义组件
const footer = Vue.extend({
template: `
<div id="footer-container">
{{title}}
</div>
`,
data() {
return {
title: '这是底部'
}
}
});
// 注册全局组件
Vue.component('footer-com', footer);
new Vue({
el: '#root',
// 注册局部组件
components: {
'header-com': header
}
});
注意事项
① 组件中不能添加el配置项，只需在根vm中配置，因为所有的组件最终都被一个vm管理（vue只有一个老大）
② 组件中使用name配置项修改组件在开发者工具中展示的名字
③ 组件实际是一个VueComponent构造函数，在每次使用组件的时候都会实例化一个组件对象。
④ 重要的内置关系：VueComponent.prototype.proto === Vue.prototype，目的是让组件能访问到根vm上的属性和方法。
到此这篇关于浅析Vue单文件组件与非单文件组件使用方法的文章就介绍到这了,更多相关Vue单文件组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue中el-dialog打开与关闭的几种方式,包括 update:visible, ref和兄弟 bus这三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
v-html是Vue.js框架中的一个指令,用于将数据中的HTML代码动态渲染到页面上,它主要用于渲染一些静态的HTML内容或者从后台获取的富文本数据,下面介绍Vue v-html详细解析与代码实例,感兴趣的朋友一起看看吧2024-12-12
vue3+高德地图只展示指定市、区行政区域的地图以及遮罩反向镂空其他地区
vue大屏项目开发,客户觉得地图上的文字标注太多了,要求地图上只显示省市等主要城市的标注,这篇文章主要给大家介绍了关于vue3+高德地图只展示指定市、区行政区域的地图以及遮罩反向镂空其他地区的相关资料,需要的朋友可以参考下2024-02-02
vue使用element-plus依赖实现表格增加的示例代码
这篇文章主要为大家详细介绍了vue使用element-plus依赖实现表格增加,文中示例代码讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2023-12-12
这篇文章主要为大家详细介绍了如何使用vue实现视频全屏切换的功能,文中的示例代码讲解详细, 具有一定的借鉴价值,有需要的小伙伴可以参考一下2023-11-11
今天小编就为大家分享一篇快速解决vue-cli在ie9+中无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了解决vue中reader.onload读取文件的异步问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue中使用ts配置的具体步骤，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下2023-02-02
最新评论