Vue组件基本概念

129 阅读2分钟
  • 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码。

    组件化:封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。组件相当于库,把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。

    模块化:模块相当于业务逻辑模块,把同一类型的项目里的功能逻辑进行需求性的封装。

scoped作用

  • vue组件内样式,只针对当前组件内标签生效如何做?
    • 给style添加scoped属性。
  • 用途:防止全局同名CSS污染。
  • 原理:在标签加上v-data-something属性,再在选择器加上对应[v-data-something],即CSS带属性选择器,以此完成类似作用域的选择方式,scoped会在元素上添加唯一的属性(data-v-x形式),css编译后也会加上属性选择器,从而达到限制作用域的目的。

组件通信

父向子

  • 用途:从一个vue组件里把值传给另外一个vue组件。
  • 方式:通过props传递。
  • 父传子步骤:
    • 子组件内,props定义变量,在子组件使用变量;
    • 父组件内,使用子组件属性方式给props变量传值。

单向数据流

  • 从父到子的数据流向,叫做单向数据流。
  • props里定义的变量不能修改,props里的变量本身是只读的。

子向父

  • 用途:子改变父里的数据。
  • 方式:在父组件中给子组件绑定一个自定义的事件,子组件通过$emit()触发该事件并传值。
  • 子传父步骤:
    • 父组件内,给组件@自定义事件="父methods函数"
    • 子组件内,恰当时机this.$emit('自定义事件名',值)

跨组件传值(兄弟传值)

  • 方式:通过中央通信 let bus = new Vue()
  • 什么是evenBus技术?
    • 当2个没有引用关系的组件之间要通信传值。
  • evenBus技术本质是什么?
    • 空白Vue对象,只负责onon和emit