Vue 组件 - 组件通信

vue 组件的使用

1.组件-为何用

为何学？

• 各自独立, 便于复用, 易于维护

是什么？

• 可复用的 Vue 实例对象，封装标签, 样式和JS代码

2.组件_概念

组件化 ：

封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

一个页面，可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为( html, css 和 js )

3.组件_基础使用

使用步骤

1. 封装组件 ( 一个 vue 文件就是一个组件 )

2. 引入组件

3. 注册组件

   全局注册

   在 main.js 中使用 Vue.component(‘组件名’, 组件对象)

   注册的组件可以在任意地方使用

   局部注册

   在 components 属性中注册

   注册的组件只能在当前组件中使用

4. 使用组件

   - <组件名></组件名>
   

4.组件-scoped作用

作用

  - 让样式只在当前组件的 template 中生效
  - 解决多个组件样式名相同, 冲突问题

原理

  - 会自动给标签添加data-v-hash值属性,
  - 给所有 css 选择器加了一个属性选择器

<style scoped>

5.组件通信-父子互传

先了解一下哪个是父组件，哪个是子组件：

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

父传子 - props

- 1. 子组件中定义 props 来接收父组件传递过来的数据
- 2. 父组件中, 给子组件标签上进行属性绑定传值

子传父 - $emit

- 1. 在父组件中, 给子组件绑定自定义事件, 父组件中定义事件处理函数
- 2. 子组件中, 在恰当的时机, 使用 this.$emit() 触发事件, 传递数据

6.组件通信_单向数据流

在vue中需要遵循单向数据流原则:

1. 父组件的数据发生了改变，子组件会自动跟着变
2. 子组件不能直接修改父组件传递过来的props  props是只读的！！！

父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新

7.组件通信-EventBus

跨组件通信时使用

当两个没有引用关系的组件之间要通信传值

核心语法

EventBus/index.js - 定义事件总线bus对象

import Vue from 'vue'
// 导出空白vue对象
export default new Vue()

总结: 空的Vue对象, 只负责$on注册事件, $emit触发事件,一定要确保$on先执行