vue组件学习复习笔记(二)，包括（vue组件、vue生命周期、axios使用、组件进阶、自定义指令等）

---

前言

本文包含 vue组件 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue组件、vue生命周期、axios使用、组件进阶、自定义指令等）
如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正

---

一 Vue组件概念, 创建和使用

1. 折叠面板-重复标签实现多个

$$总结$$

1. 遇到重复标签想复用?
   封装成组件
2. 组件好处?
   各自独立, 便于复用

---

2. 组件概念

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

$$小结$$

1. 组件是什么?
   可复用的vue实例, 封装标签, 样式, JS
2. 什么时候封装组件?
   遇到重复标签, 可复用的时候
3. 组件好处?
   各自独立, 互不影响

---

3. 组件的基础使用

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

1. 创建组件, 封装要复用的标签, 样式, JS代码

2. 注册组件

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

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

3. 使用组件
   
   $$小结$$

• 创建和使用组件步骤?
  创建.vue文件 – 标签 – 样式 – JS进去
  注册组件 (全局 / 局部)
  使用组件 (组件名用作标签)
• 组件运行结果?
  把组件标签最终替换成, 封装的组件内标签

---

4. 组件-scoped作用

• 准备: 当前组件内标签都被添加 data-v-hash值 的属性
• 获取: css选择器都被添加 [data-v-hash值] 的属性选择器
  

1. Vue组件内样式, 只针对当前组件内标签生效如何做?
   给style上添加scoped
2. 原理和过程是什么?
   会自动给标签添加data-v-hash值属性, 所有选择都带属性选择

---

二 Vue组件通信

1. 父传子_props

父组件 -> 子组件 传值

• 首先明确父和子是谁, 在父引入子 (被引入的是子)
  • 父: App.vue
  • 子: MyProduct.vue
• 创建MyProduct.vue如下图所示
  

$步骤$

1. 子组件内, 定义变量, 准备接收, 然后使用变量
   
2. 父组件(App.vue)内, 要展示封装的子组件(MyProduct.vue)
   引入组件, 注册组件, 使用组件, 传值进去

$$总结$$

1. 什么时候需要父传子技术?
   从一个vue组件里把值传给另一个vue组件(父->子)
2. 父传子口诀(步骤)是什么?
   子组件内, props 定义变量, 在子组件使用变量
   父组件内, 使用子组件, 属性方式给props变量传值
3. props有哪2种定义方式, 区别是?
   props: [] - 只声明变量, 不能类型校验
   props: {} - 声明变量和校验类型规则 - 不对则报错

---

2. 父向子-配合循环

---

3. 单向数据流

从父到子的数据流向, 叫单向数据流

原因: 子组件修改, 不通知父级, 造成数据不一致性

Vue规定props里的变量, 本身是只读的

总