Vue组件的嵌套和VueComponent关系

最新推荐文章于 2022-07-23 15:09:16 发布

李公子丶

最新推荐文章于 2022-07-23 15:09:16 发布

阅读量524

点赞数 2

分类专栏： Vue2学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_54527592/article/details/119328783

版权

Vue2学习笔记专栏收录该内容

48 篇文章 16 订阅

订阅专栏

Vue 组件的嵌套
组件的嵌套：子组件以标签的形式要在父组件的模板中使用
template 模板内直接子元素有且仅有一个 (所以套个div)

关于VueComponent：

1.app组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写<app/>或<app></app>，Vue解析时会帮我们创建app组件的实例对象，

即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。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <app>
        </app>
    </div>
    <script>
        // 定义 insideComponent组件
        const insideComponent = Vue.extend({
            name: 'inside-component',
            template: `<div>
                    <h2>{{title}}</h2>
                    <p>这是一个内部组件</p>
                </div>`,
            data() {
                return {
                    title: '你好啊'
                }
            }
        })

        // 定义firstComponent组件
        const firstComponent = Vue.extend({
            name: 'first-component',
            template: `<div>
                    <h1>{{title}}</h1>
                    <p>这是一个组件</p>
                    <inside-component></inside-component>
                </div>`,
            data() {
                return {
                    title: 'HELLO WORLD'
                }
            },
            components:{
                'inside-component': insideComponent
            }
        })

        // 定义app组件
        const app = {
            template: `<div>
                    <first-component></first-component>
                    <button @click="msg">点击</button>
                </div>`,
            components: {
                // 将first-component 作为当前组件的子组件 在template里面使用
                'first-component' : firstComponent
            },
            methods: {
                msg() {
                   console.log('同学，你好 this的指向是')
                   console.log(this)
                }
            },
        }
        
        const vm = new Vue({
            el: '#root',
            components:{
                app
            }
        })
    </script>
</body>
</html>

在vm实例对象中我们可以看到在$children属性中可以看到有一个数组面装的就是app组件的实例对象内容与vm的实例对象大致相同