09 组件

一、vue组件概念

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码 — 一个vue文件就是一个组件

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

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

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。

二、vue组件基础使用

目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

口诀: 哪部分标签复用, 就把哪部分封装到组件内

2.1、 创建和使用组件步骤

创建.vue文件 – 标签 – 样式 – JS进去

注册组件 (全局 / 局部)

使用组件 (组件名用作标签

2.2 注册组件

2.2.1 全局注册

全局注册 – main.js中 – 语法如下

// main.js 全局注册
import Vue from 'vue'
import 组件对象 from 'vue文件路径'

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

2.2.2 局部注册

局部注册 – 某.vue文件内 – 语法如下

<template>
  <div id="app">
    <!-- 3. 组件名当做标签使用 -->
    <!-- <组件名></组件名> -->
  </div>
</template>

<script>
// 目标: 局部注册 (用的多)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import 组件对象 from 'vue文件路径'
export default {
    components: {
      "组件名": 组件对象
    }
}
</script>

三 scoped

组件：scoped作用

准备: 会给当前组件内标签添加 data-v-hash值 的属性

获取: css选择器都被添加 [data-v-hash值] 的属性选择器

Vue组件内样式, 只针对当前组件内标签生效时给style上添加scoped

会自动给标签添加data-v-hash值属性, 所有选择都带属性选择

<style scoped>

原理和过程是什么?
会自动给标签添加data-v-hash值属性, 所有选择都
带属性选择

四 组件通信

4.1 父传子

1 创建

2 父向子传值

商家想要每一个组件显示不同的数据，

1什么时候需要父传子技术?
从一个vue组件里把值传给另一个vue组件(父->子)
2 父传子口诀(步骤)是什么?
子组件内, props定义变量, 在子组件使用变量
父组件内, 使用子组件, 属性方式给props变量传值

4.1.1父向子-配合循环

循环使用组件注意事项?
每次循环, 变量和组件, 都是独立的

4.1.2单向数据流

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

1）父组件的数据发生了改变，子组件会自动跟着变

2）子组件不能直接修改父组件传递过来的props props是只读的

4.2 子传父—自定义事件

1 什么时候使用子传父技术?
当子想要去改变父里的数据
2 子传父如何实现?
父组件内, 给组件@自定义事件="父methods函数"
子组件内, 恰当时机this.$emit('自定义事件名', 值)

问题: 两个没有任何引入关系的组件, 要如何互相通信呢?

4.3EventBus

目标：常用于跨组件通信时使用

1 什么时候使用eventBus技术?
当2个没有引用关系的组件之间要通信传值
2 eventBus技术本质是什么?
空白Vue对象, 只负责$on和$emit

面试题

1）请说下封装 vue 组件的过程

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用

具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。

2）Vue组件如何进行传值的

父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值

子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

3） Vue 组件 data 为什么必须是函数

每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量

4）讲一下组件的命名规范

给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突