Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc

组件化开发

模块是指将一个大的js文件按照模块化拆分规则进行拆分成的每个js文件, 凡是采用模块方式开发的应用都可以称为模块化应用(组件包括模块)

传统方式开发的一个网页通常包括三部分: 结构(HTML)、样式(CSS)、交互(JavaScript)

关系纵横交织复杂，牵一发动全身不利于维护
代码复用率不高., 页面中复用的代码需要通过复制的方式在其他页面中使用

在这里插入图片描述

组件是实现应用中局部功能的代码(HTML,CSS,JS)和资源(图片,声音,视频)的集合,凡是采用组件方式开发的应用都可以称为组件化应用

每一个组件都有独立的js,css以及HTML片段，这些独立的代码只供当前组件使用，不存在纵横交错问题便于维护
代码复用性增强, 页面中复用的代码通过引入组件的方式在其他页面中使用

在这里插入图片描述

`组件的创建`

创建组件调用Vue.extend({该配置项和new Vue的配置项几乎相同只是略有差别})简写形式可省略Vue.extend()即{配置项}但底层在注册组件的时候还是会调用Vue.extend()静态方法,该方法的返回值是全新的VueComponent构造函数(函数类型的对象)不是构造函数的实例

template配置项: 使用template配置项配置模板语句,不能使用el配置项,因为组件具有通用性不特定为某个容器服务而是为所有容器服务
data配置项: data必须使用函数形式返回一个对象,不能使用对象的形式,因为对象数据是共享的只有一份,组件的数据是独立的不能共享
name配置项: 设置Vue开发者工具中显示的组件的名字但不是设置组件的名字(默认都是驼峰式显示)

<script>
    // 创建组件实例对象(结构HTML 交互JS 样式CSS)
    const myComponent = Vue.extend({
        template : `
                <ul>
                    <li v-for="(user,index) of users" :key="user.id">
                        {{index}},{{user.name}}
                    </li>
                </ul>
                `,
        // 每次调用data方法都会返回一个对象,这个对象中的数据是独立的
        data(){
            return {
                users : [
                    {id:'001',name:'jack'},
                    {id:'002',name:'lucy'},
                    {id:'003',name:'james'}
                ]
            }
        }
    })

// 创建组件时省略Vue.extend()
const myComponent = {
    template : `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}},{{user.name}}
                </li>
            </ul>
            `,
    data(){
        return {
            users : [
                {id:'001',name:'jack'},
                {id:'002',name:'lucy'},
                {id:'003',name:'james'}
            ]
        }
    }
}
</script>

`注册组件进行管理`

局部注册: 在创建Vue实例时使用配置项components:{组件的名字:组件对象},只能在父组件绑定的容器中或模板语句中使用,一般是在哪注册在哪使用

<body>
    <!--容器1-->
    <div id="app">
        <userlogin></userlogin>
    </div>
    <script>
        // 创建组件实例对象
        const myComponent = Vue.extend({
            template : `
                <ul>
                    <li v-for="(user,index) of users" :key="user.id">
                        {{index}},{{user.name}}
        			</li>
        		</ul>
            `,
            // 每次调用data方法都会返回一个对象,这个对象中的数据是独立的
            data(){
                return {
                    users : [
                        {id:'001',name:'jack'},
                        {id:'002',name:'lucy'},
                        {id:'003',name:'james'}
                    ]
                }
            }
        })

        // 在Vue实例中注册组件进行管理,实例vm根组件也是myComponent组件的父组件
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '第一个组件'
            },
            // 局部注册的组件只能在父组件绑定的容器中使用,这里父组件就是vm
            components : {
                // userlist是组件的名字,myComponent组件实例对象
                userlist : myComponent,
            }
        })
    </script>
</body>

全局注册: 调用Vue的静态方法Vue.component(组件的名字(标签名), 组件对象),可以在所有组件绑定的容器中或模板语句中使用

<body>
    <!--容器1-->
    <div id="app">
        <h1>{{msg}}</h1>
        <userlogin></userlogin>
    </div>
    <!--容器2-->
    <div id="app2">
        <userlogin></userlogin>
    </div>
    <script>
        // 创建组件
        const userLoginComponent = {
            // template只能有一个根元素
            template : `
            <div>
                <h3>用户登录</h3>
                <form @submit.prevent="login">
                    账号：<input type="text" v-model="username"> <br><br>
                    密码：<input type="password" v-model="password"> <br><br>
                    <button>登录</button>
                </form>
            </div>
            `,
            data(){
                return {
                    username : '',
                    password : ''
                }
            },
            methods: {
                login(){
                    // this是vc
                    alert(this.username + "," + this.password)
                }
            },
        }
        // 全局注册组件,自动调用Vue.extend()方法
        Vue.component('userlogin', userLoginComponent)
        

        // Vue实例
        const vm2 = new Vue({
            el : '#app2'
        })

        // Vue实例
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '第一个组件'
            },
        })
    </script>
</body>

`组件使用`

使用组件在容器中中以HTML自闭合标签(组件起名有规范,不可以是HTML内置标签名)的方式使用,如果不在脚手架环境中使用这种方式除了第一个元素渲染后续元素都不会渲染

第一种：全部小写
第二种：首字母大写，后面都是小写
第三种：kebab-case串式命名法(如user-login）
第四种(常用)：CamelCase驼峰式命名法(UserLogin), 这种方式只允许在脚手架环境中使用

<!--在页面中以html标签的方式使用组件-->
<div id="app">
    <h1>{{msg}}</h1>
    <userlist></userlist>
    <userlist></userlist>
    <userlist/>
</div>

`组件嵌套(父子组件)`

组件的划分粒度很重要，粒度太粗会降低组件的复用性, 为了让复用性更强,中Vue中创建的组件也支持父子组件嵌套使用

子组件由父组件来管理，父组件由父组件的父组件管理, 在Vue中根组件就是Vue实例vm
局部注册的子组件只能在父组件绑定的容器或者template配置项配置的模板语句中使用,一般是在哪注册在哪使用

<body>
    <div id="root"></div>
    <script>
        // 创建Y1组件
        const y1 = {
            template : `
                <div>
                    <h3>Y1组件</h3>
                </div>
            `
        }
        // 创建X1组件
        const x1 = {
            template : `
                <div>
                    <h3>X1组件</h3>
                </div>
            `
        }
        // 创建Y组件
        const y = {
            template : `
                <div>
                    <h2>Y组件</h2>
                    <y1></y1>
                </div>
            `,
            // 注册y1组件
            components : {y1}
        }
        // 创建X组件
        const x = {
            template : `
                <div>
                    <h2>X组件</h2>
                    <x1></x1>
                </div>
            `,
            // 注册x1组件
            components : {x1}
        }
        // 创建app组件
        const app = {
            template : `
                <div>
                    <h1>App组件</h1>
                    <x></x>
                    <y></y>
                </div>
            `,
            // 注册X组件,对象的属性名和属性值相同时可以省略属性值
            components : {x,y}
        }
        // vm根组件
        const vm = new Vue({
            el : '#root',
            template : `
                <app></app>
            `,
            // 注册app组件
            components : {app}
        })
    </script>
</body>

VueComponent & Vue

`vm和vc的区别`

new Vue({})配置项中的this是Vue实例vm(构造函数中的this指向新创建的对象), Vue.extend({})配置项中的this是VueComponent的实例vc

vm和vc拥有大量相同的属性和函数,但二者并不相同,只能说vm上有的vc上不一定有但vc上有的vm上一定有(vm上有el属性而vc上没有,vc的data必须是一个函数)

Vue.extend()源码: 因为Sub是个局部变量, 所以每一次调用Vue.extend方法返回的都是一个全新的VueComponent构造函数(构造函数也是类型即对应一个对象),并不是VueComponent构造函数的实例

有了构造函数当Vue在解析组件标签时就会创建一个VueComponent实例,每个组件标签都对应一个VueComponent构造函数的实例

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <user></user>
    </div>
    <script>
        // 创建组件
        const user = Vue.extend({
            template : `
            <div>
                <h1>user组件</h1>
            </div>
            `,
            mounted(){
                // this是VueComponent的实例,但user是一个全新的VueComponent构造函数(函数类型的对象)
                console.log('vc', this === user)//false
            }
        })
        // Vue实例
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'vm与vc'
            },
            components : {
                user
            },
            mounted() {
                // this是Vue实例
                console.log('vm', this)
            },
        })
    </script>
</body>

`原型对象`

XX的原型对象是一个所有对象实例共享的对象有且只有一个,获取原型对象有两种方式

prototype ：显示的原型属性(建议程序员使用的)，可以通过构造函数.prototype的方式获取原型对象
__proto__：隐式的原型属性(不建议程序员使用的)，可以通过对象实例.__proto__的方式获取原型对象

在这里插入图片描述

// 构造函数(函数本身也是一种类型，代表User类型有一个prototype属性）
function User(){}
// 通过User构造函数获取函数的原型对象
let x = User.prototype
// 通过User构造函数可以创建实例
let a = new User()
// 通过User构造函数的实例获取到实例原型对象
let y = a.__proto__
// 获取的是同一个原型对象
console.log(x === y) // true
// 给“User的原型对象”扩展属性,不是给User构造函数扩展属性
User.prototype.counter = 1000

// 通过a实例可以访问到这个扩展的counter属性
// 访问原理：首先去a实例上找counter属性，如果a实例上没有counter属性的话，会沿着__proto__这个原型对象去找counter属性
console.log(a.counter)
//console.log(a.__proto__.counter)

`vc,vm共享Vue原型对象`

VueComponent.prototype.__proto__ = Vue.prototype: 这行代码实现了Vue,vm,VueComponent,vc都共享了同一个Vue的原型对象

Vue原型对象上有很多属性和方法如$mount()，对于组件VueComponent来说就不需要再额外提供了，直接使用vc调用$mount()即可，代码得到了复用<img

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <user></user>
    </div>
    <script>
        // 给“Vue的原型对象”扩展一个counter属性
        Vue.prototype.counter = 1000

        // 创建组件,调用Vue.extend()返回的是一个全新的VueComponent构造函数
        const user = Vue.extend({
            template : `
            <div>
                <h1>user组件</h1>
            </div>
            `,
            mounted(){
                // 通过this也就是vc可以访问到Vue原型对象上的属性
                console.log('vc.counter', this.counter)
                // msg是vm实例上的属性不是原型对象上的属性所以访问不了
                //console.log('vc.msg', this.msg)
            }
        })
		// user就是VueComponent构造函数
        console.log('user.prototype.__proto__ === Vue.prototype' , user.prototype.__proto__ === Vue.prototype)// true

        // Vue的实例
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'vm与vc'
            },
            components : {
                user
            },
            mounted() {
                // this是Vue实例
                console.log('vm', this)
            },
        })
		// vm实例可以直接访问原型对象的属性
        console.log('vm.counter', vm.counter)
        console.log('vm.counter', vm.__proto__.counter)
    </script>
</body>