Vue 学习笔记(中)

作者: ygqygq2 分类: 开发 发布时间: 2022-07-15 16:56

1. 组件间传值及校验

父组件调用子组件的标签,通过标签上的属性,向子组件传值,子组件通过 props 来接收对应属性的内容,后子组件才能使用传递过来的值。

传值校验:
required: true 必须传参数
default 默认值
validator 对参数深度校验

2. 单向数据流

父级 prop 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。

3. Non-Props 属性

子组件会使用 props:[''] 的方式接收父组件传递的参数,如果子组件不使用 props:[''] 接收参数,那这个参数就是一个 Non-Props 属性。一般在标签中定义 styleclass 时使用。

如果不想把 Non-Props 属性渲染到子组件最外层标签,子组件使用 inheritAttrs:false 即可。

子组件有多个最外层标签时, Vue 不知道该给哪个标签渲染,干脆就不渲染了,如果想指定哪个最外层标签使用 Non-Props 属性,在这个标签中使用 v-bind="$attrs" 即可。

4. 父子组件通过事件通信

子组件不能直接修改父组件的传值,但可以使用 $emit 来告诉父组件进行修改。

使用 v-model 改写,其中如果不想用 modelValue 变量名,比如用 app 代替,可以写成 v-model:app,而且可以支持传递多个参数。

v-model 传递修饰符:

5. slot 插槽

slot 不能绑定事件,外面可以包一层标签绑定事件。
slot 中使用的数据,作用域问题:

  • 父横板里调用的数据属性,使用的都是父模板里的数据
  • 子模板里调用的数据属性,使用的都是子模板里的数据

具名插槽:

作用域插槽:

6. 动态组件和异步组件

动态组件:根据数据的变化,结合 component 这个标签来随时动态切换组件的显示

异步组件:是异步执行某些组件的逻辑

7. 其它基础知识

v-once 让某个元素标签只渲染一次
ref 实际上是获取 dom 节点/组件 引用的一个语法
provide 传递给孙组件,inject 孙组件接收,其中 provide 要传递 data 内值时,应该写成类似如下:

8. Vue 中的动画

通过标签增减类名实现动画开关

通过 style 来控制过渡

单元素,单组件的入场出场动画

自定义 css 样式,或者配合 Animate.css

type 设置过渡时间以 transition 还是 animation 为准。 duration 设置过渡时间,单位为毫秒。

使用 js 做动画

单元素多标签切换动画

多个单组件间的切换

列表动画

状态动画



微信扫描下方的二维码阅读本文

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据