vue 组件的一些基本使用方法

1.组件-为何用

为何学？

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

是什么？

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

2.组件_概念

组件化 ：

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

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

3.组件_基础使用

使用步骤

• 0. 封装组件 ( 一个 vue 文件就是一个组件 )
• 2. 引入组件

• 3. 注册组件

  • 全局注册

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

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

  • 局部注册

    在 components 属性中注册

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

• 4. 使用组件

  • <组件名></组件名>

4.组件-scoped作用

• 作用

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

• 原理

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

<style scoped>

5.组件通信-父子互传

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

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

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

父传子 - props

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

子传父 - $emit

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

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

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

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

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

7.组件通信-EventBus

跨组件通信时使用

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

核心语法

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

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

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