Vue学习记录day05：Vue组件化开发

组件

1. 组件化的基本使用
   
   

    

   这里的步骤都代表什么含义呢？
   1.Vue.extend() ：
   调用 Vue.extend () 创建的是一个组件构造器。
   通常在创建组件构造器时，传入 template 代表我们自定义组件的模板。
   该模板就是在使用到组件的地方，要显示的 HTML 代码。
   事实上，这种写法在 Vue2.x 的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
   2.Vue.component() ：
   调用 Vue.component () 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
   所以需要传递两个参数： 1 、注册组件的标签名 2 、组件构造器
   3. 组件必须挂载在某个 Vue 实例下，否则它不会生效。
   我们来看下面我使用了三次 cpn > cpn >
   而第三次其实并没有生效：
    

2. 全局组件和局部组件
    

    

3. 父组件和子组件
   
    

   
   
   
     
     
   
   
   
     {{message}}
     
   
   
   
   
   
   

   
    

4. 组件的语法糖注册方式
    

    

5. 组件模板分离写法
    

    

6. 组件中数据存放问题
   组件不可以访问Vue实例数据！
   组件自己的数据存放在哪里呢?
          组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)，只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据
   为什么data在组件中必须是一个函数呢?
          首先，如果不是一个函数，Vue直接就会报错。其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
    

    

7. 组件中的data为什么是函数
   首先，如果不是一个函数，Vue直接就会报错。
   其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
   
    

8. 父子组件的通信

      注意：子组件是不能引用父组件或者Vue实例的数据的

      

如何进行父子组件间的通信呢？Vue官方提到

1.通过props向子组件传递数据

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

 

• 父级向子级传递（通过props传递）
   
  props的值有两种方式：
  方式一：字符串数组，数组中的字符串就是传递时的名称。
       方式二：对象，对象可以设置传递时的类型，也可以设置默认值等
  
  示例：
   
  
  
   
• 子级向父级传递

  自定义事件的流程：

在子组件中，通过$emit()来触发事件。

                在父组件中，通过v-on来监听子组件事件

 

9.父子组件的访问方式

    父组件访问子组件 : 使用$children或  $refs preference(引用)

    子组件访问父组件：使用$parent

$children的缺陷：
通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。
但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。
有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs
$refs的使用：
$refs和ref指令通常是一起使用的。
首先，我们通过ref给某一个子组件绑定一个特定的ID。
其次，通过this.$refs.ID就可以访问到该组件了。

  
  



  
  
  
  按钮

子组件访问父组件的访问方式： $parent

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

注意事项：

尽管在 Vue 开发中，我们允许通过 $parent 来访问父组件，但是在真实开发中尽量不要这样做。

子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。

如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。

另外，更不好做的是通过 $parent 直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。

 

 

 

组件化高级

1. slot-插槽的基本使用：
    

   
   
   
     
     
   
   
   
   
   
   
     
     
   你好啊
     
   nnihao
   
   
   
   
   
   
   
   
   
   

    

2. slot-具名插槽的使用
    

   
   
   
     
     
   
   
   
   
     标题
     左边按钮
     返回
   
   
   
   
   
   
   
   
   
   

    

3. 什么是编译的作用域
    

   
   
   
     
     
   
   
   
     
     按钮
   
   
   
   
   
   
   
   

    

4. 作用域插槽的案例