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来减少垃圾评论。了解我们如何处理您的评论数据