浅析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 + Axios实现全局Loading自动显示关闭效果
在vue项目中,我们通常会使用Axios来与后台进行数据交互,而当我们发起请求时,常常需要在页面上显示一个加载框（Loading）,然后等数据返回后自动将其隐藏,本文介绍了基于Vue + Axios实现全局Loading自动显示关闭效果,需要的朋友可以参考下2024-03-03
在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,下面这篇文章主要给大家介绍了关于vue普通加密及国密SM2、SM3和sm4使用的相关资料,需要的朋友可以参考下2022-12-12
本文主要介绍了vue实现浏览器桌面通知的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
vue3中实现拖拽排序代码示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能时应选用vue-draggable-next插件,传统的draggable插件不兼容Vue3,可能导致TypeError错误,安装后,需在项目中引入并使用,具体步骤包括安装插件、引入使用、查看效果和相关说明,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue + vuex todolist的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)
有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件,这篇文章主要介绍了vue 2 实现自定义组件一到多个v-model双向数据绑定的方法,需要的朋友可以参考下2024-07-07
下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了通过图带你深入了解vue的响应式原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2019-06-06
这篇文章主要介绍了Vue之Dep和Observer的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论