脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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封装可复用组件confirm,并绑定在vue原型上的示例

    vue封装可复用组件confirm,并绑定在vue原型上的示例

    今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue 事件获取当前组件的属性方式

    vue 事件获取当前组件的属性方式

    这篇文章主要介绍了vue 事件获取当前组件的属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • vue3中超好用的插件整理

    vue3中超好用的插件整理

    最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • axios如何取消重复无用的请求详解

    axios如何取消重复无用的请求详解

    这篇文章主要给大家介绍了关于axios如何取消重复无用的请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-12-12
  • Vue Router深扒实现原理

    Vue Router深扒实现原理

    在看这篇文章的几点要求：需要你先知道Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vue-Router的基本使用后再回来看这篇文章
    2022-09-09
  • Vue 中使用lodash对事件进行防抖和节流操作

    Vue 中使用lodash对事件进行防抖和节流操作

    这篇文章主要介绍了Vue 中使用lodash对事件进行防抖和节流操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现动态路由的方法及路由原理解析

    vue实现动态路由的方法及路由原理解析

    这篇文章主要介绍了路由原理及vue实现动态路由,Vue Router 提供了丰富的 API，可以轻松地实现路由功能，并支持路由参数、查询参数、命名路由、嵌套路由等功能，可以满足不同应用程序的需求，需要的朋友可以参考下
    2023-06-06
  • vue实现消息列表向上无缝滚动效果

    vue实现消息列表向上无缝滚动效果

    本文主要实现vue项目中,消息列表逐条向上无缝滚动,每条消息展示10秒后再滚动,为了保证用户能看清消息主题,未使用第三方插件,本文实现方法比较简约,需要的朋友可以参考下
    2024-06-06
  • uni-app vue3接口请求封装示例代码

    uni-app vue3接口请求封装示例代码

    uni-app是一个使用Vue.js开发的多端开发框架,下面这篇文章主要给大家介绍了关于uni-app vue3接口请求封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • element ui提交表单返回成功后自动清空表单的值的实现代码

    element ui提交表单返回成功后自动清空表单的值的实现代码

    这篇文章主要介绍了elementui提交表单返回成功后自动清空表单的值,本文通过两种方法结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08

最新评论