本文共 4041 字，大约阅读时间需要 13 分钟。

• 上一篇：
• 下一篇：

# 组件化

## 不用组件的两个【灾难性问题】

随着ajax异步请求的出现，慢慢形成了前后端的分离

客户端需要完成的事情越来越多，代码量也是与日俱增。 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。 但是这种维护方式，依然不能避免一些灾难性的问题。

1、如全局变量同名问题

2、又如 代码的编写方式对js文件的依赖顺序几乎是强制性的

但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情。

而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。

## Vue 组件化思想

官方 - 《组件基础》 -

• 我们希望开发出一个个独立可复用的小组件来构造我们的应哟

• 那样， 任何都会被抽象成一颗组件数

  
  （其中，连线指的是下级对上级组件的依赖）

• 这样，我们的代码更加方便组织和管理，并且扩展性也更强。

## 注册组件

注册组件的基本步骤

• 创建组件构造器
  调用 Vue.extend() 方法创建组件构造器
• 注册组件
  调用 Vue.component() 方法 注册组件
• 使用组件
  在Vue实例的作用域范围内使用组件

基本使用

全局组件 、 局部组件

• 全局组件，意味着可以在多个Vue的实例下使用（例子如上）
• 局部组件

父组件和子组件

cpn2包含了 cpn1，所以cpn2是父组件

语法糖：组件注册

省略 Vue.extend ，直接在 component里面定义 组件构造器

## 技巧：模板分离写法

把模板写在 标签内

或者这样

## 组件访问实例数据 【无法访问的】

如果组件内容需要动态显示，需要在组件内定义数据（数据不能放在顶级实例内，组件是无法访问到的）

另外：

组件内部的 data 属性值必须是个 函数

## 为什么 组件内部的 data 属性值必须是个 函数？？？

因为，Vue为了防止多个同一种组件之间的数据相互影响

详细看 ：

即，写法要如下

## 父子组件之间通讯

• 通过 props 向子组件传递数据
• 通过 事件 向父组件发送消息

通过 props 向子组件传递数据

通过 props 向子组件传递数据 - 验证数据类型 - type

如果偷偷把 message 类型改一下（如下）

const app = new Vue({
         el: '#app',      data: {
           movies: ['明日花绮罗', '上三悠亚', '斋藤飞鸟'],        message: ['你好啊']      },      components: {
           cpn: cpn      }    })

会尽量将数据转为 相依类型显示

同时报错

通过 props 向子组件传递数据 - 验证数据类型 - validator + required

• 官方 api -

通过 props 向子组件传递数据 - 默认值 - default

通过 props 向子组件传递数据 - 驼峰标识

结论：

• 在不用脚手架情况下，写html标签时候，必须不能用驼峰（html不区分大小写）
• 用了脚手架，随意（）

【误区】props 双向绑定

如果我们在子组件内做 props 的双向绑定，打开控制台，发现会报错（如下图）

看报错信息，知道是官方不推荐。

一个很大的原因是 ：这样违背了 组件的独立性（如，子组件1改了值 ⇒ 父组件值也改 ⇒ 子组件2值也改了 ⇒ 【组件1和组件2的值绑定了（不独立）】）

报错信息里面也说了处理方法

Instead, use a data or computed property based on the prop's value. Prop being mutated: "num1"翻译：用一个 data 或者 计算属性，接收传过来的 prop 值作为初始值。

解决方案如下

通过 事件 向父组件发送消息

注意 驼峰标识 问题

父子通信案例：

• 子元素接收父元素初始值
• 子元素 data双向绑定
• 父元素接收子元素修改值

  
     
   
    
    
fatherNum:{
  {fatherNum}}
    
        
      
   
  
     
       

## 子组件最顶层只能有一个element

否则报错（如下）

（下面）才是正确的

## 父子组件之间 - 访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

• 父组件访问子组件：使用 $children 或 $refs
• 子组件访问父组件：使用 $parent

$children - 父访子 - 【不常用，常用 ref】

我们先来看下 $children 的访问

this.$children 是一个数组类型，它包含所有子组件对象。 我们这里通过一个遍历，取出所有子组件的 message 状态。

  
     
   
    
        
        
        
    打印子组件  
   
  
     
       

ref - 父访子

$children 的缺陷：

• 通过 $children 访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。
• 当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。
• 有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用 $refs

$refs 的使用：

• $refs 和 ref 指令通常是一起使用的。
• 首先，我们通过ref给某一个子组件绑定一个特定的ID。
• 其次，通过 this.$refs.ID 就可以访问到该组件了。

  
     
   
    
        
        
        
    打印子组件  
   
  
     
       

$parent - 子访问父

如果我们想在子组件中直接访问父组件，可以通过 $parent

注意事项：

• 尽管在Vue开发中，我们允许通过 $parent 来访问父组件，但是在真实开发中尽量不要这样做。
• 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。
• 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。
• 另外，更不好做的是通过 $parent`` 直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。

$root 访问根组件

根组件也就是 我们 new 出来的 Vue

用 vue dev-tool 看腋下

上面界面 代码如下

  
     
   
    
    
root
    
        
    
root
  
   
  
     
       

我们点击一下，就能访问到 root 组件了（跟上面例子结果一样，是因为这个的父组件就是根组件，感兴趣套多层组件看看）

文章目录

转载地址：https://lawsssscat.blog.csdn.net/article/details/104533456 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！