VueComponent

最新推荐文章于 2024-08-23 13:45:37 发布

lunabar

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量48

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lunabar/article/details/134686258

版权

关于VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写或,Vue解析时会帮我们创建school组件的实例对象。
即Vue帮我们执行：new VueComponent（options）。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
4.关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
5.VueComponent的实例对象，以后简称为vc（也可称之为：组件实例对象）
Vue的实例对象，以后简称vm。
6.一个重要的内置关系：VueComponent.prototype.proto=== Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

<body>
    <div id="root">

        

    </div>
    <script>
        Vue.prototype.x = 99

        const student = Vue.extend({
            template: `
                <div>
                    <h3>学生名称:{{name}}</h3>
                    <h3>学生年龄：{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    name: "张三",
                    age: 18,
                }
            }
        })

        const school = Vue.extend({
            template: `
                <div>
                    <h3>学校名称：{{name}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <button @click="tip">点我一下显示this</button>
                    <student></student>
                    
                </div>
               
            `,
            data() {
                return {
                    name: "尚硅谷",
                    address: "北京昌平",
                }
            },
            components:{
                student,
            },
            methods: {
                tip(){
                    console.log("显示school的this为",this)
                    console.log("组件实例上的x",this.x)
                }
            }
        })

        const hello = Vue.extend({
            template: `
                <div>
                    <h3>你好啊{{name}}!</h3>
                </div>
            `,
            data(){
                return {
                    name: "Tom",
                }
            }
        })

        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                    <hello></hello>
                </div>
            `,
            components: {
                school,
                hello,
            },
        })

        const vm = new Vue({
            el: "#root",
            template:`
                <app></app>
            `,
            components: {
                app,
            }
        })

    </script>
</body>

在Vue原型上定义属性x为99，组件实例化对象也能访问
在这里插入图片描述

APP替root管理组件，Vue开发者工具父件子件架构。

这里是引用

lunabar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VueComponent

data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！Vue的实例对象，以后简称vm。
复制链接

扫一扫