Vue03

监听器

watch属性里面是函数即可

如果要监听复杂类型数据或者需要一进来马上触发可以添加其他配置

将本来的函数变为对象, 函数叫做 handler, 添加 deep immediate 两个属性

immediate 为true则立即执行

deep： true 深度侦听复杂类型的变化

侦听复杂类型, 或者立即执行侦听函数

品牌案例数据持久化(缓存)

组件

创建和使用

是一个vue实例, 封装标签, 样式和JS代码

便于复用, 易于扩展

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

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

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

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

组件内template只能有一个根标签

组件内data必须是一个函数, 独立作用域

.vue 单文件就是组件

封装可复用的代码

引入 注册 使用标签(渲染)

注册分全局、局部

style scoped 的使用

可以解决多个组件样式名相同, 冲突问题

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

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

用法：style上加scoped, 组件内的样式只在当前vue组件生效

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

组件通信

单向数据流

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

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

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

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

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

子传父

子组件内, 恰当时机this.$emit('自定义事件名', 值 )

父组件内, 给组件@自定义事件="父methods函数"

子 $emit

父 v-on (@) 监听

后续处理函数

父传子

子组件内, props定义变量, 在子组件使用变量

父组件内, 使用子组件, 属性方式给props变量传 值

父组件传入属性

子组件 props

直接用就可以

父传子配合循环

父子组件数据传递小结：

无论是父传子还是子传父都是三步

• 一方主动传递, 另一方表明愿意接受, 最后用起来

• 父传子

  • 父组件以属性的形式传入数据
  • 子组件 props 定义需要接受的数据
  • 直接当成 data 使用即可

• 子传父

  • 子组件主动触发自定义事件 this.$emit('自定义事件名')
  • 父组件 监听 v-on 就是 @自定义事件名
  • 父组件给个对应的处理函数

Todo 案例

复制布局和样式

在 app.vue 放入一个任务数据

父传子传递到 TodoMain 遍历渲染

动态 class 决定 划线

v-model 决定 多选框勾选状态

追加任务

TodoHearder 绑定 input 输入值

监听回车事件 $emit 通知父页面

父页面监听这个事件, 将任务 push 到 list