脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue非单文件组件

Vue组件之非单文件组件的使用详解

 更新时间：2023年05月18日 10:26:14   作者：吴小糖  
Vue中常常会把组件分为非单文件组件和单文件组件，这篇文章主要为大家介绍了非单文件组件的具体使用方法，文中的示例代码讲解详细，需要的可以参考一下

标准化开发时的嵌套：

在实际开发中，通常会创建一个 APP 组件作为根组件，由这个根组件去管理其它的组件，而 Vue 实例只需要管理这个 APP 组件就行了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue2标准化开发时的嵌套</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="APP"></div>
		<script>
			// 创建组件一
			const FrameHead = {
				template: `
					<div>
						<p>{{name}}</p>
					</div>
				`,
				data() {
					return {
						name:"组件一"
					}
				}
			}
			// 创建组件二
			const FrameBody = {
				template: `
					<div>
						<p>{{name}}</p>
					</div>
				`,
				data() {
					return {
						name:"组件二"
					}
				}
			}
			// 创建最大的根组件，由它来管理其它的组件
			const app = {
				template: `
					<div>
						<frame-head></frame-head>
						<frame-body></frame-body>
					</div>
				`,
				components:{
					FrameHead,
					FrameBody
				}
			}
			const vm = new Vue({
				template:`<app></app>`,
				el: "#APP",
				components: {app}
			});
		</script>
	</body>
</html>

 VueComponent 构造函数【扩展】：

<div id="APP">
	<my-code></my-code>
</div>
const MyCode = Vue.extend({
	template: `
		<div>
			<p>{{name}}</p>
		</div>
	`,
	data() {
		return {
			name:"你好呀！"
		}
	}
})
 
console.log(MyCode); // VueComponent
 
const vm = new Vue({
	el: "#APP",
	components: {
		MyCode
	}
});

注：其实组件就是一个构造函数 VueComponent 。

 关于 VueComponent：

- 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 自动生成的。

- 我们只要使用组件，Vue 解析时就会帮我们创建这个组件的实例对象，也就是 Vue 帮我们执行了 new VueComponent(options) 这个构造函数。

- 特别注意：每次调用 Vue.extend，返回的都是一个全新的 VueComponent 。

- 组件中的 this 指向：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的 this 均是【VueComponent 实例对象】。

- Vue 实例中的 this 指向：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的 this 均是【Vue 实例对象】。

 Vue 实例与 VueComponent 的内置关系：

// 查看 VueComponent 和 Vue 实例的关系
console.log( MyCode.prototype.__proto__ === Vue.prototype ); // true

 - 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

 为什么要有这个关系：让组件实例对象 VueComponent 可以访问到 Vue 原型上的属性和方   法。

 注：Vue 强制更改了 VueComponent 的原型对象指向 Object 的原型对象的隐式链，将其改到指向 Vue 的原型对象上。

到此这篇关于Vue组件之非单文件组件的使用详解的文章就介绍到这了,更多相关Vue非单文件组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue el-date-picker 日期回显后无法改变问题解决

    vue el-date-picker 日期回显后无法改变问题解决

    这篇文章主要介绍了vue el-date-picker 日期回显后无法改变问题解决,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04
  • Vue 数据绑定的原理分析

    Vue 数据绑定的原理分析

    这篇文章主要介绍了Vue 数据绑定的原理，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2020-11-11
  • Pinia简单使用以及数据持久化详解

    Pinia简单使用以及数据持久化详解

    最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue中el-table树状表格末行合计实现

    vue中el-table树状表格末行合计实现

    本文主要介绍了vue中el-table树状表格末行合计实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • vue项目中使用rem,在入口文件添加内容操作

    vue项目中使用rem,在入口文件添加内容操作

    这篇文章主要介绍了vue项目中使用rem,在入口文件添加内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue加载json文件的方法简单示例

    Vue加载json文件的方法简单示例

    这篇文章主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    这篇文章主要介绍了详解vite2.0配置学习(typescript版本)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 详解Vue.js Mixins 混入使用

    详解Vue.js Mixins 混入使用

    本篇文章主要介绍了Vue.js Mixins 混入使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 1分钟Vue实现右键菜单

    1分钟Vue实现右键菜单

    今天给大家分享的是，如何在最短的时候内实现右键菜单。高效实现需求，避免重复造轮子。感兴趣的可以了解一下
    2021-10-10
  • Vue3中reactive函数toRef函数ref函数简介

    Vue3中reactive函数toRef函数ref函数简介

    这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下
    2021-09-09

最新评论