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

电玩女神 2023-05-31 03:22 53阅读 0赞

## 组件组织 ##

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

## 组件复用性 ##

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

## 单个根元素限制 ##

*  场景：写一个广告组件（包含广告标题、广告词）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][20191022194929656.png]  
    ![在这里插入图片描述][20191022194937854.png]
 *  如果在模板中这样写，Vue 会显示错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。
 *  解决方案：将模板的内容包裹在一个父元素内，来修复这个问题  
    ![在这里插入图片描述][20191022195001963.png]
 *  即组件模板template的单个根元素限制。

## 识别组件 ##

*  识别父组件与子组件：
 *  ①在**js中创建注册**组件的代码被称为“子组件”**（组件模板→子组件）**
 *  ②在**HTML文档**中**引用**组件的代码被称为“父组件”**（组件引用→父组件)**

![在这里插入图片描述][20191022195129397.png]

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

## props传值 ##

*  子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据，props 的值可以是两种，字符串数组或者对象。接下来主要介绍下字符串数组的用法。
 *  案例1：在子组件的友情链接描述里应用了父组件的数据，通过props接收数组格式的数据describtion，并将其渲染到组件模板中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]

## props-动态传值 ##

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

## props传值 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][20191022195601494.png]

*  由于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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][20191022195752540.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  案例3：接下来从父级组件给传入文章标题、作者等信息  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]

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

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

## props传值-数组 ##

*  案例4：场景→书籍卖书广告。在典型应用中，可能在 data 里有一个数组，组件通过遍历展示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]
 *  案例4：接下来给组件添加方法  
    ![在这里插入图片描述][20191022200017853.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]
 *  可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的

## 单向数据流 ##

*  Vue 2.x与Vue 1.x 比较大的改变就是，Vue2.x 通过 props 传递数据是单向的了， 也就父组件数据变化时会传递给子组件，但是反过来不行。
 *  之所以这样设计，是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。  
    ![在这里插入图片描述][20191022200132586.png]  
    ![在这里插入图片描述][20191022200138148.png]  
    **\[Vue警告\]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。**

## 改变 props ##

*  业务中会经常遇到两种需要改变 props 情况
 *  （1）父组件传值→子组件保存初始值\*\*（初始化后解耦）\*\*
 *  第一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 再声明一个数据，引用父组件的 props ，示例代码如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]
 *  案例解析：
 *  组件中声明了数据 childValue它在组件初始化时会获取来自父组件的 countValue之后就与之无关了，只用维护 childValue，这样就可以避免直接操作父级组件count数据。
 *  （2）被转变的原始值
 *  另一种情况就是 props作为需要被转变的原始值传入。这种情况用计算属性就可以了。示例代码如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]  
    **因为用 css 传递宽度要带单位（ px ），但是每次都写太麻烦，而且数值计算一般是不带单位，所以统 在组件内使用计算属性就可以了。**

## 总结： ##

*  （1）组件组织：通常一个应用会以一棵嵌套的组件树的形式来组织，VUE两大核心思想–组件化、数据驱动。
 *  （2）组件复用性：可以将组件进行任意次数的复用
 *  （3）单个根元素限制：every component must have a single root element  
    (每个组件必须只有一个根元素)
 *  （4）识别父组件与子组件：注册处为子组件、引用处为父组件
 *  （5）props传值：通过 Prop 向子组件传递数据，即子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据  
    **结束，完毕。有问题留言小编…**

[20191022194711341.png]: /images/20230531/f80b5d680c724fd899e6b742258bcd42.png
[20191022194817948.png]: /images/20230531/af8611d583a043398f7ee04540b94123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/0b3abbd3c371469592d2849c604c4338.png
[20191022194929656.png]: /images/20230531/4e6941c4e6af4302949fc888de922b84.png
[20191022194937854.png]: /images/20230531/875399a9751547df84c7e029fedfe297.png
[20191022195001963.png]: /images/20230531/80a547ad47994e5492bf1cf35a0c4bbd.png
[20191022195129397.png]: /images/20230531/89201095fa5940a79836499f274bb426.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/ba59506ba7d045618f708e04bd4a316a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/829ee6ef5f8c4d7f82c37745e615df8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/d43e94673d1341ad94574e3343c90445.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/ec0ec2f9468749429adc5b54f1fc9e55.png
[20191022195601494.png]: /images/20230531/5eb59ed37fdc498d9bf72f02c837f8d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/ec5ea46feab442ab8b34e27828ed1ba1.png
[20191022195752540.png]: /images/20230531/c87e2386aefa492ea7c02fac23d210d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/4824a7a317e741daa48ba76ca09c726b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/7ebd52481ae24b93a54a40afa48d6c8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230531/da56f74ed9544b1d8129b5408e38da18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230531/563de22ddd5b4ed7aec9a964ae4cf36f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230531/7972a3ebf28b4e5ca876f1ec0b3b9131.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230531/a154c07651fb402893adb1cea76eec50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230531/ac6128fa21174dbc909056e6e0f80cc5.png
[20191022200017853.png]: /images/20230531/accc1dabbd2049b684a6d2f949946475.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: /images/20230531/b02b7ce7fe06470b88d82dc294465ef3.png
[20191022200132586.png]: /images/20230531/a520f98c3e0c440ab6744f97cc581ceb.png
[20191022200138148.png]: /images/20230531/2b1b771c6c2c49ec81444e80c7c2c5af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]: /images/20230531/721548f8967a438db2e129222f8ea447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]: /images/20230531/d651f00b5a9e4395a2709fcee355159c.png