Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）

网友投稿 558 2022-09-02

Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）

欢迎加入刚建立的社区加入社区的好处： 1、专栏更加明确、便于学习 2、覆盖的知识点更多、便于发散学习 3、大家共同学习进步 3、不定时的发现金红包（不多哈）

文章目录

1、效果图分析2、先创建一个组件3、新创建一个组件、嵌套已经存在的组件4、第四步注册组件5、实现的效果6、套娃式嵌套代码实例7、测试效果8、关于VueComponent9、代码实例10、实现的效果

1、效果图分析

2、先创建一个组件

3、新创建一个组件、嵌套已经存在的组件

注意：注册组件的过程写在新组建中。并且在template中要使用组件才可以生效

学校名称：{{schoolName}}

学校位置：{{schoolAddress}}

4、第四步注册组件

//创建Vue实例 new Vue({ el: '#App', data: { value: "Vue" }, //第二步、注册组件（局部注册） components: { school } })

5、实现的效果

6、套娃式嵌套代码实例

7、测试效果

8、关于VueComponent

关于VueComponent：

1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2、我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。3.特别注意：每次调用Vue.extend，返回的都是一个全新的：VueComponent4.关于this指向： (1)、组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象。 (2)、new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象。5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 Vue的实例对象，以后简称vm。

9、代码实例

10、实现的效果