vue组件以及组件通信

组件

• 什么是组件？

  • 可复用vue实例，封装了标签、样式、JS

• 为什么要封装组件？

  • 重复使用相同的代码

• 什么时候封装组件？

  • 遇到可复用放入重复标签。
  • 相对多，复杂的代码块

• 组件的好处？

  • 各自独立，方便使用

• 什么是组件化？

  • 组件化：封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护
  • 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的结构样式和行为(html, css和js)

组件的基本使用

1. 创建组件 （components/Demo.vue） 组件一般都是在components文件夹中创建

2.注册组件

• 全局注册

  • 在全局入口main.js文件中注册

  • 全局注册的组件可以在任意的vue文件中使用

  • 语法：

import Vue from 'vue'
import 组件对象 from '组件路径'

Vue.component("组件名", 组件对象)

• 例如

import Demo from './components/Demo'

Vue.component("Demo", Demo)

• 局部注册

  • 在需要使用组件的vue文件中注册使用
  • 语法：

import 组件对象 from '组件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

3.使用组件

• 注册的“组件名”可以当做标签来使用

注意

• 组件内的template只能有一个跟标签
• 组件内的data是一个函数，作为独立的作用域
• 组件内的style标签有scoped属性，说明当前的样式只作用在当前的组件内

组件的通信

• 父 --> 子

1. 子组件中，在props定义变量用来接收父组件传递的数据
2. 父组件中，把子组件props定义的变量当成子组件的属性传递数据

• 单向数据流

  • 从 父 --> 子 的数据流向叫做单向数据流

  • 子组件修改数据，不通知父组件，会造成数据不一致

  • props属性本身是只读，不能重新赋值

• 子 --> 父

  • 子组件中，使用this.$emit("自定义事件","传递的数据")给父组件传递一个自定义事件和值

  • 父组件中，在子组件的标签上使用 @自定义事件名="函数" 来接收子组件传递的值

跨组件通信 （eventBus）

• 两个兄弟组件之间的数据传递
• 传值： evnetBus.$emit('自定义事件'，'值')
• 接收值： eventBus.$on('自定义事件'，'函数体')

例如

//传值
 eventBus.$emit("send", this.index, 1) 
 
 //接收值
 eventBus.$on("send", (index, num) => {
      //函数体
      console.log(index)
      console.log(num)
    });