学习VUE第八天课程（VUE之组件（复用性、props、单向数据流））

亦凉 2023-05-31 03:20 68阅读 0赞

# VUE之组件（复用性、props、单向数据流） #

### 组件组织 ###

**通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动**  
![在这里插入图片描述][20191022191914240.png]  
**例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。  
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。  
组件的注册类型分两种：全局注册和局部注册。**

# 组件复用性 #

**可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用**  
![在这里插入图片描述][20191022192149150.png]

# 单个根元素限制 #

**场景：写一个广告组件（包含广告标题、广告词）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][2019102219221673.png]  
**如果在模板中这样写，Vue 会显示错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。**

#### 解决方案：将模板的内容包裹在一个父元素内，来修复这个问题 ####

![在这里插入图片描述][20191022192243299.png]  
**即组件模板template的单个根元素限制。**

## 识别组件 ##

**识别父组件与子组件：  
①在js中创建注册组件的代码被称为“子组件”（组件模板→子组件）  
②在HTML文档中引用组件的代码被称为“父组件”（组件引用→父组件）**  
![在这里插入图片描述][20191022192313933.png]

#### 小结：注册处为子组件、引用处为父组件。 ####

# props传值 #

**子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据，props 的值可以是两种，字符串数组或者对象。接下来主要介绍下字符串数组的用法。**

### 案例1： ###

**在子组件的友情链接描述里应用了父组件的数据，通过props接收数组格式的数据describtion，并将其渲染到组件模板中。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

## props-动态传值 ##

**动态传值：日常开发里，传递的数据并不是直接写死的，而是来自父级的动态数据，使用指令 v-bind来动态绑定 props 值，当父组件的数据变化时，也会传递给子组件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

## props传值 ##

#### 案例2：给文章组件传递一个标题 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
**由于HTML特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转为短横分隔命名 。**

#### 注意事项： ####

**1、子组件通过props接收父级组件传递的数据  
2、由于HTML特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转为短横分隔命名 。  
（即HTML中引用是短横分隔命名blog-title，JS的DOM模板里为小驼峰命名blogTitle，两者可以对应识别）**

## props传值-多个值 ##

**在组件的自定义标签上直接写该 props 名称，如果要传递多个数据，在 props 数组中添加项即可。**

### 案例3： ###

**文章组件，组件data自带文章主体内容。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

### 接下来从父级组件给传入文章标题、作者等信息 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

## props传值-多个值（事件绑定） ##

**案例分析：props 选项传值VS组件自身data函数return数据  
①区别：props 来自父级，而 data是子组件自身数据，作用域是组件本身。  
②这两种数据都能在模板 template 及计算属性 computed和方法 methods 中使用。**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]

## props传值-数组 ##

#### 案例4： ####

**场景→书籍卖书广告。在典型应用中，可能在 data 里有一个数组，组件通过遍历展示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]

###### 案例4：接下来给组件添加方法 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]  
**可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的**

## props传值练习 ##

#### 课堂练习：通过props传值动态绑定 ####

**用v -model 绑定父级组件的数据nameValue，当通过输入框任意输入时，子组件接收到props，userName也会实时响应，并更新组件模板。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]

## 单向数据流 ##

**Vue 2.x与Vue 1.x 比较大的改变就是，Vue2.x 通过 props 传递数据是单向的了， 也就父组件数据变化时会传递给子组件，但是反过来不行。**  
**之所以这样设计，是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]

## \[Vue警告\]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。 ##

# 改变 props #

##### 业务中会经常遇到两种需要改变 props 情况 #####

**（1）父组件传值→子组件保存初始值（初始化后解耦）  
第一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 再声明一个数据，引用父组件的 props ，示例代码如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]

### 案例解析： ###

**组件中声明了数据 childValue它在组件初始化时会获取来自父组件的 countValue之后就与之无关了，只用维护 childValue，这样就可以避免直接操作父级组件count数据。**

## （2）被转变的原始值 ##

**另一种情况就是 props作为需要被转变的原始值传入。这种情况用计算属性就可以了。示例代码如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]

#### 因为用 css 传递宽度要带单位（ px ），但是每次都写太麻烦，而且数值计算一般是不带单位，所以统 在组件内使用计算属性就可以了。 ####

# 课堂总结 #

##### （1）组件组织：通常一个应用会以一棵嵌套的组件树的形式来组织，VUE两大核心思想–组件化、数据驱动。 #####

##### （2）组件复用性：可以将组件进行任意次数的复用 #####

##### （3）单个根元素限制：every component must have a single root element (每个组件必须只有一个根元素) #####

##### （4）识别父组件与子组件：注册处为子组件、引用处为父组件 #####

##### （5）props传值：通过 Prop 向子组件传递数据，即子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据 #####

## 如有问题或者疑问请留言联系小编！！！ ##

## 感谢来访！！！ ##

[20191022191914240.png]: /images/20230531/c8e4b2dbd2484171aecedcbf61e62eaf.png
[20191022192149150.png]: /images/20230531/8f5daa6c95d74df7bdc65e429cc0fca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/3836106a11c945bca8682a321ac636d6.png
[2019102219221673.png]: /images/20230531/7d99e79100cf46ddb7f807ebaf8ed21a.png
[20191022192243299.png]: /images/20230531/6d59acccb5e944fb87c0cca708399935.png
[20191022192313933.png]: /images/20230531/a4776fd1ccba48dca6629c4e1868b4af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/3a6fef92107d43d79270792f9186f52a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/2098289a71464139b0a1a3808fd6831b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/fcd1c2e0fb7a448ebfdbaaad7938cf60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/7d0c2d2fd324404dad2dea160b3176c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/90ea63e9bb0f49e995c7987122adf4ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/945bde9a515b46caa2d27e7ea80e2a04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230531/3496828a015840d6908e8b6b0046041e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230531/c387e4ba81164cf0b7e046354570d486.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230531/989b462c34e545d8a64213e212d41400.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230531/97509996ee234acdb00b1c2c48fb58b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230531/12d2d83a690b40059c7c22413a1e93db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230531/f507258cae664662a04042bf66a4687e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230531/63c5d4e894ef4b589307a7219eaf0b2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230531/887e8fbc40ff4d58b23a6d4f498dcc60.png