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.js中过滤器的相关资料,需要的朋友可以参考借鉴，一起来看看吧。2017-01-01
ElementUI级联选择器实现同一父级下最多只能选中一个子级
本文主要介绍了ElementUI级联选择器实现同一父级下最多只能选中一个子级,同一父级下的子节点单选,又可以选择多个不同父级下的节点,具有一定参考价值,感兴趣的可以了解一下2023-10-10
在前端开发中,经常需要打印页面的特定部分,比如客户列表或商品详情页,要快速实现这些功能,可以使用 vue3-print-nb 插件,本文就给大家介绍了如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印,需要的朋友可以参考下2024-06-06
Emit是Vue3中另一种常见的组件间传值方式,它通过在子组件中触发事件并将数据通过事件参数传递给父组件来实现数据传递,本文就来介绍一下Vue3 emit传值,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家详细介绍了基于Vue实现页面切换左右滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
在 Vue 3 中上传 KML 文件并在地图上显示的实现方法
KML 文件作为一种标准的地理数据格式,广泛应用于地理信息系统（GIS）中,通过 OpenLayers 和 Vue 3 的组合,您可以方便地实现地图数据的可视化和交互,本文介绍在 Vue 3 中上传 KML 文件并在地图上显示的实现方法,感兴趣的朋友一起看看吧2024-12-12
vue post application/x-www-form-urlencoded如何实现传参
这篇文章主要介绍了vue post application/x-www-form-urlencoded如何实现传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本文介绍了vuejs指令的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
本篇文章主要介绍了如何解决vue与传统jquery插件冲突，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
最新评论