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非单文件组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！