Vue3学习笔记-07

Vue3学习笔记-07

一、组件嵌套

在实际开发中，可以定义一个app组件来管理其他所有的组件

<div id="root">
        <school></school>
    </div>

    <script>
        //创建user组件
        const user = Vue.extend({
    
            template:`
                <div>
                    <h2>{
     {name}}</h2>
                    <h2>{
     {age}}</h2>
                    <h2>{
     {sex}}</h2>
                    <button @click="addAge">点击我年龄加1</button>
                </div>
            `,
            data(){
    
                return{
    
                    name:'张三',
                    age : 18,
                    sex:'男'
                }  
            },
            methods:{
    
                addAge(){
    
                    this.age++
                }
            }
        })

        //创建school组件
        const school = Vue.extend({
    
            template:`
            <div>
                <h2>学校名称：{
     {schoolName}}</h2>
                <h2>学校地址：{
     {address}}</h2>
                <user></user>
            </div>
            `,
            // el:'#root',  //在创建组件时，不要写el配置项，因为最终所有的组件都要被一个vm所管理，由vm决定服务于哪一个容器
            data(){
    
                return {
    
                    schoolName:'lyu',
                    address:'兰山区'
                }
            },
            components:{
    
                user:user
            }
        })

        new Vue({
    
            el:'#root',
            data:{
    

            },
            components:{
    
                school:school
            }
            
        })
    </script>

二、关于VueComponent

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

​ ②我们只需要写<school></school> 或者 <school/> ,Vue解析的时候会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options)。

​ ③特别注意的是：每一次调用 Vue.extend , 返回的都是一个全新的VueComponent。

​ ④关于this的指向：

​ （1）.组件配置中：

​ data函数、methods中的函数、watch中的函数、computed中的函数， 他们的this都是 VueComponent 的实例对象

​ （2）.new Vue()配置中：

​ data函数、methods中的函数、watch中的函数、computed中的函数， 他们的this都是 Vue的实例对象

​ ⑤VueComponent 的实例对象，以后简称 vc（也可以称之为： 组件实例对象）。

​ Vue的实例对象，可以简称为vm

三、一个重要的内置关系

<script>
    //定义一个构造函数
	function Demo(){
    
        this.a = 1
        this.b = 2
    }
    //创建一个Demo的实例对象
    const demo = new Demo()
    
    console.log(Demo.prototype)  //这里的Demo.prototype中的prototype是Demo的显式原型属性
    console.