Vue3 | 组件的定义及复用性、局部组件、全局组件、组件间传值

作者: 凌川江雪 | 来源:发表于2021-03-14 00:27 被阅读0次

2018-07-26
Vue3 | 组件的定义及复用性、局部组件、全局组件、组件间传值
Vue-TodoList组件化思维
vue中的组件
5 Vue全局组件、局部组件、动态组件、插槽
第3章 vue组件开发
vue 自定义组件（一）全局、局部组件
VUE组件（应用）
【Vue3 从入门到实战进阶式掌握完整知识体系】011-探索组
【Vue.js】 todolist组件拆分（八）

完整原文地址见简书https://www.jianshu.com/p/1bc868ff488f

更多完整Vue笔记目录敬请见《前端 Web 笔记汇总目录（Updating）》

本文内容提要

Vue.createApp()的参数是页面的根组件

自定义的子组件是可以被复用的，且多个复用子组件之间数据相互独立

自定义的【全局子组件】方便快捷，随处可用，但影响性能

定义局部组件

局部组件再例

局部组件语法一重点

全局组件、局部组件比较

父子组件间相互通信的方式

动态参数传参解决 number转string的问题

传参类型校验

传参类型校验再例【Boolean例】

传参类型校验再例【Function例】【传递函数型参数】

props块

props块的required属性配置必填效果

props块的default属性配置默认值

props块的validator属性配置参数值大小限制

多个数据传参时常规写法

使用Object方式优化v-bind传参

HTML中，推荐使用横杠分割法代替驼峰命名法

单向数据流的理解

解决方法

单向数据流存在的意义

Non-prop 属性

子组件使用inheritAttrs: false属性配置，可以拒绝继承接收父组件传递过来的属性

Non-props 应用场景

$attrs修饰符

$attrs修饰符再例

$attrs 运用于生命周期方法中

`Vue.createApp()`的参数是页面的根组件

Vue.createApp()传入的参数，将作为页面的根组件，
似Android的rootView：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `
        <div>
            hello！
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>

效果：

自定义的子组件是可以被复用的，且多个复用子组件之间数据相互独立

如下复用三个<counter/>自定义子组件，三个<counter/>之间数据相互独立：

<script>
    const app = Vue.createApp({
        template: `
        <div>
            <counter/>
            <counter/>
            <counter/>
        </div>`
    });

    app.component('counter',{
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>
        `
    })

    const vm = app.mount('#heheApp');
</script>

效果：

自定义的【全局子组件】方便快捷，随处可用，但影响性能

自定义的全局子组件方便快捷，随处可用，
任何地方都可以引用子组件，如下【似Android的Fragment】代码；

但只要使用.component()定义了子组件，子组件便挂载在VueApp实例上了，
即使不调用该子组件，它也会占用内存和性能：

<script>
    const app = Vue.createApp({
        template: `
        <div>
            <counter-parent />
        </div>`
    });

    app.component('counter-parent',{
        template: `
            <div>
                <counter/>
            </div>`
    })

    app.component('counter',{
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

效果：

定义局部组件

语法：

 const 局部组件实例名= {
        data() {
            return {
                ...
            }
        },
        template: 
            ...
    }

const app = Vue.createApp({
        components: { 定义局部组件引用名 : 局部组件实例名},
        template: `
        <div> <局部组件引用名/> </div>`
    });

案例代码：

<script>
    const counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const app = Vue.createApp({
        components: { localWidget : counter},
        template: `
        <div>
            <localWidget />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：

如果局部组件实例名 与 定义的局部组件引用名 相同，
则可以直接使用以下的简写语法：

<script>

    const counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const app = Vue.createApp({
        components: { counter},
        template: `
        <div>
            <counter />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：

局部组件再例

<script>

    const counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const heheda = {
        template: `
            <div>heheda</div>`
    }

    const app = Vue.createApp({
        components: { 
            counter, 
            hehedadom : heheda
        },
        template: `
        <div>
            <hehedadom />
            <counter />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：

局部组件语法一重点

为了将局部组件的实例名 同普通的js（驼峰命名法）变量区分开来，
推荐使用首字母大写的驼峰 对 局部组件的实例名进行命名，
同时，
Vue代码在template中引用局部组件时时，
会忽略大小写和杠号对components中定义的组件进行映射；
如下，
<counter />忽略了大小写映射到 Counter；
<heheda-dom />忽略了横杆号和大小写映射到 HehedaDom：

<script>

    const Counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const HehedaDom = {
        template: `
            <div>heheda</div>`
    }

    const app = Vue.createApp({
        components: { 
            Counter, HehedaDom
        },
        template: `
        <div>
            <heheda-dom />
            <counter />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：

全局组件、局部组件比较

全局组件定以后，随处可用，方便快捷，任何地方都可以引用子组件，
但性能不高（定以后不用时也挂载并占用内存），
命名建议，小写字母配合横线隔开；

局部组件定义后需注册才能使用才会占用资源，性能较高，
但使用较麻烦，
命名建议，大写字母配合驼峰命名法；

父子组件间相互通信

主要是借助props的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `
        <div><test content="heheda!!!"></div>`
    });

    app.component('test', {
        props: ['content'],
        template:`<div>{{content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>
</html>

效果：

动态参数传参解决 number转string的问题

静态传参，存在如题问题：

<script>
    const app = Vue.createApp({
        template: `
        <div><test content = 123></div>`
    });

    app.component('test', {
        props: ['content'],
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

将数据写在data版块中，借用v-bind 动态传参，解决以上问题：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 666
            }
        },
        template: `
        <div><test :content = 'num'></div>`
    });

    app.component('test', {
        props: ['content'],
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

传参类型校验

传参类型校验支持：String、Boolean、Array、Object、Function、Symbol 等类型；

关键：
将props位的值，从数组形式换为对象（键值）形式，
键为承接属性，值为期望值类型：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 666
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : String,
        },
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

如上代码，期望得到一个String类型的参数，却传入一个number类型的参数，
则运行时会刷出报错警告：

更正入参类型，则不再报错：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : "666"
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
     ...
    })

    const vm = app.mount('#heheApp');
</script>

传参类型校验再例【Boolean例】

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : "666"
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : Boolean,
        },
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

传参类型校验再例【Function例】【传递函数型参数】

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : "666"
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : Function,
        },
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

更正类型【传递函数型参数】：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : () => {console.log("8888888")}
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : Function,
        },
        methods: {
            handlerClick() {
                console.log("666666");
                this.content();
            }
        },
        template:`<div @click="handlerClick">{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

`props`块的`required`属性配置`必填`效果

props块的required属性配置true时，要求对应配置的属性要传参数，
没有传参数，则报错；

如下案例，配置了required属性为true，但没有传参：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 123
            }
        },
        template: `
        <div><test /></div>`
    });

    app.component('test', {
        props: {
            content: {
                type : Number,
                required: true
            }
        },
        methods: {
            handlerClick() {
                console.log("666666");
                this.content();
            }
        },
        template:`<div @click="handlerClick">{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

效果：

传了参就好起来了：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 123
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content: {
                type : Number,
                required: true
            }
        },
        methods: {
            ...
        },
        template:...
    })

    const vm = app.mount('#heheApp');
</script>

`props`块的`default`属性配置`默认值`

2018-07-26
vue组件相关练习1、设计组件定义、分类（全局、局部组件）、2、组件传值、父传值给子组件，用props参数接收子传...
Vue3 | 组件的定义及复用性、局部组件、全局组件、组件间传值
完整原文地址见简书https://www.jianshu.com/p/1bc868ff488f[https://w...
Vue-TodoList组件化思维
一、全局组件化二、局部组件化三、子组件给父组件传值
vue中的组件
组件可以扩展HTML元素，封装可重用的代码，组件分为全局和局部全局：局部：组件之间的传值父传子用属性传...
5 Vue全局组件、局部组件、动态组件、插槽
Vue全局组件、局部组件 ->聚焦点：组件的复用性 -> data数据必须写成函数的形式，每个组件调用都retur...
第3章 vue组件开发
1. 组件开发在vue中，组件是最重要的组合部分，官方中定义组件为可复用的vue实例，分为全局组件和局部组件。 ...
vue 自定义组件（一）全局、局部组件
vue自定义组件分为局部组件和全局组件全局组件全局组件格式template 是模板props 是自定义组件用到...
VUE组件（应用）
全局变量：局部变量：使用组件添加或删除列表：使用组件完成购物车：利用组件传值：组件——子传父：组件是v...
【Vue3 从入门到实战进阶式掌握完整知识体系】011-探索组
2、组件间传值及传值校验父组件给子组件传值运行结果父组件给子组件传动态参数运行结果子组件校验父组件的传参...
【Vue.js】 todolist组件拆分（八）
1、component全局组件 2、局部组件 A、定义局部组件 B、局部组件需要到Vue中声明引用 3、外部向组件...