Vue学习2：组件化开发（基本知识、父子间通信、slot、模块化开发）_前端需要了解模块化开发

最新推荐文章于 2024-07-16 15:41:21 发布

2401_85124821

最新推荐文章于 2024-07-16 15:41:21 发布

阅读量122

点赞数 3

文章标签： vue.js 前端学习

本文链接：https://blog.youkuaiyun.com/2401_85124821/article/details/139785682

版权

});


2.注册组件：`Vue.component('my-cpn', cpnC);`  
 创建构造器+注册语法糖（更常用）：就是把template的内容直接写到cpnC中，省去extend这一步  
 全局组件：

Vue.component(‘myCpn’, {
template: `

标题

内容

` })


局部组件：

const app = new Vue({
el: ‘#app’,
data: {},
components: {
myCpn: {
template: `

标题

内容

` } } })


3.使用组件：在Vue实例的作用范围内（id="app"内）使用 `<my-cpn></my-cpn>`


### 2. 全局组件和局部组件


全局组件：可以在多个Vue实例下使用  
 在Vue外部注册的：`Vue.component('myCpn', cpnC);`


局部组件：只能在特定的Vue实例下使用（用得更多）  
 在Vue中写在components中：`components: { myCpn: cpnC }`


### 3. 父组件和子组件


app是cpnC2的父级（可看作root），cpnC2是cpnC1的父级，只有注册了，才可以在其实例范围下使用

<script>
    const cpnC1 = Vue.extend({
        template: `

标题1

内容1

` }); const cpnC2 = Vue.extend({ template: `

标题2

内容2

`, components: { cpn1: cpnC1 } }); const app = new Vue({ el: '#app', data: { }, components: { cpn2: cpnC2 } })


### 4. 模板的分离写法


![在这里插入图片描述](https://img-blog.csdnimg.cn/2021042116250580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


### 5. 组件数据


组件中的html结构要使用数据，使用组件中的data来设置，data是一个函数，返回一个对象  
 为什么是一个函数？因为当多次使用组件时，data是函数的形式，则会重新调用函数，里面的数据对于每个组件来说是私有的，不是公用的

<!-- html结构分离 -->
<template id="cpn1">
    <h2>{{title1}}</h2>
</template>
<template id="cpn2">
    <h2>{{title2}}</h2>
</template>

<script src="../vue.js"></script>
<script>
    //全局组件
    Vue.component('cpn1', {
        template: '#cpn1',
        data() { //注意data是一个函数 返回一个对象
            return {
                title1: '全局组件'
            }
        }
    })
    const app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            cpn2: {
                template: '#cpn2',
                data() { //data是函数 返回一个对象
                    return {
                        title2: '局部组件'
                    }
                }
            }
        }
    })
</script>


## 二、父子组件通信


在开发中，往往需要上层组件请求网络数据，再传递给下面的组件进行展示  
 父子组件间通信：  
 1.通过props向子组件传递数据  
 2.通过事件向父组件发送消息  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210421170532926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


### 1. 父传子


`props`：

<template id="cpn">
    <div>
        <p>{{cmessage}}</p>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
    </div>
</template>

<script src="../vue.js"></script>
<script>
    const app = new Vue({ //相当于父组件
        el: '#app',
        data: {
            message: 'vivian',
            movies: ['海贼王', '柯南', '火隐忍者', '蜡笔小新']
        },
        components: {
            cpn: { //子组件
                template: '#cpn',
                // 属性，里面是属性名
                // 写法一：数组形式
                // props: ['cmovies', 'cmessage']

                //写法二：类型限制
                // props: {
                // cmovies: Array,
                // cmessage: String
                // }

                //写法三：有默认值
                props: {
                    //类型是对象或者数组时，默认值必须是一个函数
                    cmovies: {
                        type: Array,
                        default() {
                            return []
                        }
                    },
                    cmessage: {
                        type: String,
                        default: 'aaa',
                        required: true
                    }
                }
            }
        }
    })
</script>


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210421172421406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 注意：v-bind语法**不支持驼峰命名法**，要转成小写，例如childMyMessage要转成child-my-message才能使用v-bind


### 2. 子传父


子组件中，通过`$emit`来触发事件  
 父组件中，通过`v-on`来监听事件


### 3. 父访问子




### 总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以**底层逻辑，基础知识要掌握好！**

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。



这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法**等高频考点**238道（含答案）**！  

资料截图 ：

![](https://img-blog.csdnimg.cn/img_convert/edeaa71cbc745698bdedcfe65be40387.png)

![](https://img-blog.csdnimg.cn/img_convert/981487b285a8b90918f35c830c299df8.png)



![](https://img-blog.csdnimg.cn/img_convert/9866daffbebcf87b44d9530a59427834.png)



**高级前端工程师必备资料包**  

![](https://img-blog.csdnimg.cn/img_convert/ba803e1b69e399b6739e3d33554d42a7.png)