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

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

文章目录

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

1、效果图分析

2、先创建一个组件

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

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

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，返回的都是一个全新的：​​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。

9、代码实例

10、实现的效果

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。