Nesting when standardizing development:
In actual development, an APP component is usually created as the root component, and this root component manages other components, while the Vue instance only needs to manage this APP component.
<!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 constructor [extension]:
<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
}
});Note : In fact, the component is a constructor VueComponent.
About VueComponents:
- The essence of the component is a constructor named VueComponent, which is not defined by the programmer, but is automatically generated by Vue.extend.
- As long as we use the component, Vue will help us create an instance object of this component when parsing, that is, Vue will help us execute the new VueComponent(options) constructor.
- Special Note: Every time Vue.extend is called, a brand new VueComponent is returned.- The this in the component points to: the data function, the function in methods, the function in watch, the function in computed, and their this is [VueComponent instance object].
- The this in the Vue instance points to: the data function, the function in methods, the function in watch, the function in computed, and their this is [Vue instance object].
The built-in relationship between Vue instance and VueComponent:
// 查看 VueComponent 和 Vue 实例的关系
console.log( MyCode.prototype.__proto__ === Vue.prototype ); // true
- An important built-in relationship: VueComponent.prototype.__proto__ === Vue.prototype
Why there is this relationship: Let the component instance object VueComponent have access to the properties and methods on the Vue prototype.
Note : Vue has forcibly changed the implicit chain of VueComponent's prototype object pointing to Object's prototype object, and changed it to point to Vue's prototype object.
Original author: Wu Xiaotang
Creation time: 2023.5.17