登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›vue3 学习笔记（不断更新中...）(2024.11.13) ...

vue3 学习笔记（不断更新中...）(2024.11.13)

晾棋砷 3 天前
组合式API

setup()

11
响应式API


  • ref
ref 用于创建响应式数据（通常用来定义 基本类型数据）
在JavaScript代码中，需要使用 .value 来操作数据
  1. let count = ref(1)
  2. console.log(count.value) // 1
  4. count.value++
  5. console.log(count.value) // 2
复制代码
在Template模板中不需要
  1. <template>
  2. <template>
  3. <template>
  4.   <Child ref="child"/>
  5. </template><Child ref="childRef"></Child>
  6. </template><button>{{ count }}</button>
  7. </template>
复制代码

  • reactive
reactive 用于创建一个响应式对象 （通常用来定义 引用类型数据）
  1. let obj = reactive({ count: 1 })
  3. obj.count++ // 2
复制代码

  • computed
使用 computed 创建一个计算属性，通过 .valule 暴露返回值

  • 创建一个只读的计算属性
默认情况下，创建的计算属性是只读的，如果修改会报错
  1. let count = ref(1)
  2. let getCount = computed(() => count.value)
  3. console.log(getCount.value) // 1
  5. getCount.value++ //error：Write operation failed: computed value is readonly
复制代码

  • 创建一个可写的计算属性
computed 可以接收一个带有 get 和 set 函数的对象来创建一个 可写 的计算属性
  1. let count = ref(1)
  2. let getCount = computed({
  3. <template>
  4. <template>
  5.   <Child ref="child"/>
  6. </template><Child ref="childRef"></Child>
  7. </template>get: () => count.value,
  8. <template>
  9. <template>
  10.   <Child ref="child"/>
  11. </template><Child ref="childRef"></Child>
  12. </template>set: (val) => {
  13. <template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template>count.value = val + 1
  22. <template>
  23. <template>
  24.   <Child ref="child"/>
  25. </template><Child ref="childRef"></Child>
  26. </template>}
  27. })
  28. console.log(getCount.value) // 1
  30. getCount.value = 1
  31. console.log(getCount.value) // 3
复制代码

  • watch
作用：用于监听响应式数据的变化，初始化的时候不执行

  • 监听 ref
  1. let count = ref(1)
  2. watch(
  3. <template>
  4. <template>
  5.   <Child ref="child"/>
  6. </template><Child ref="childRef"></Child>
  7. </template>count,
  8. <template>
  9. <template>
  10.   <Child ref="child"/>
  11. </template><Child ref="childRef"></Child>
  12. </template>(newVal, oldVal) => {
  13. <template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template>console.log(newVal, oldVal) // 2, 1
  22. <template>
  23. <template>
  24.   <Child ref="child"/>
  25. </template><Child ref="childRef"></Child>
  26. </template>}
  27. )
  28. count.value++
复制代码

  • 监听 reactive
当监听一个响应式对象时，会自动启用深度监听模式
  1. let data = reactive({ count: 1 })
  2. watch(
  3. <template>
  4. <template>
  5.   <Child ref="child"/>
  6. </template><Child ref="childRef"></Child>
  7. </template>data,
  8. <template>
  9. <template>
  10.   <Child ref="child"/>
  11. </template><Child ref="childRef"></Child>
  12. </template>(newValue, oldValue) => {
  13. <template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template>console.log(newValue, oldValue) // 2<template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template>1
  26. <template>
  27. <template>
  28.   <Child ref="child"/>
  29. </template><Child ref="childRef"></Child>
  30. </template>}
  31. )
  33. data.count++
复制代码

  • 监听 reactive 中的某个属性
  1. let data = reactive({ count: 1 })
  2. watch(
  3. <template>
  4. <template>
  5.   <Child ref="child"/>
  6. </template><Child ref="childRef"></Child>
  7. </template>() => data.count,
  8. <template>
  9. <template>
  10.   <Child ref="child"/>
  11. </template><Child ref="childRef"></Child>
  12. </template>(newVal, oldVal) => {
  13. <template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template>console.log(newVal, oldVal) // 2<template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template>1
  26. <template>
  27. <template>
  28.   <Child ref="child"/>
  29. </template><Child ref="childRef"></Child>
  30. </template>}
  31. )
  32. data.count++
复制代码

  • 停用监听器
  1. let stop1 = watch(source, callback)
  3. // 停用
  4. stop1()
复制代码

  • watchEffect
watchEffect 不需要指定监听的数据源
它是自动跟踪函数内部使用的所有响应式数据源，当任何一个数据发生变化时，都会重新执行这个函数
  1. let count = ref(1)
  3. watchEffect(() => console.log(count.value))
  4. // 输出：2
  6. count.value++
复制代码

  • 属性设置 flush: 'post'
默认情况下，监听器是在组件渲染之前执行
设置flush: 'post' 将会使监听器延迟到组件渲染之后再执行

  • 属性设置 flush: 'sync'
在某些情况下，可能有必要在响应式依赖发生改变时立即触发监听器。可以通过设置 flush: 'sync'来实现
需要注意：当如果有多个属性同时更新，可能会导致性能和数据一致性的问题

  • watchPostEffect()
相当于 watchEffect 使用 flush: 'post' 的别名

  • watchSyncEffect()
相当于 watchEffect 使用 flush: 'sync' 的别名
工具函数


  • toRef
在获取一个响应式对象的子属性的时候，会丢失其响应式，如下面：
  1. let form = reactive({ count: 1 })
  2. let count = form.count
  4. count++
  5. console.log(form.count, count) // 1, 2
复制代码
为了对响应式对象解构的时候，延续数据的响应式，需要使用 toRef：
  1. let form = reactive({ count: 1 })
  2. let count = toRef(form, 'count')
  4. count.value++
  5. console.log(form.count) // 2
  7. form.count++
  8. console.log(count.value) // 3
复制代码
使用 toRef 基于响应式对象创建的属性，与其源属性保持同步。改变源属性的值，也会更新这个新创建的属性

  • toRefs
toRefs 和 toRef 的区别就是多了个 s，一个是复数一个是单数的区别。
使用 toRefs 可以将整个响应式对象都解构出来，不再是针对其中单个属性，如下：
  1. let form = reactive({ count: 1 })
  2. let formRefs = toRefs(form)
  4. form.count++
  5. console.log(formRefs.count.value) // 2
  7. formRefs.count.value++
  8. console.log(form.count) // 3
复制代码
移除的API

Vue.set、Vue.delete 、 Vue.observable、Vue.filter、Vue.mixin
组件

新增组件


  • Fragment
在 Vue2 中只能有一个根节点，Vue3 中可以支持多个根节点
其实在 Vue3 中每个组件还是一个根节点，只不过是使用 Fragment 组件将多根节点组件包裹起来了， fragment 和 keep-alive 一样，是一个抽象组件，不会被渲染出来。
  1. <template>
  2. <template>
  3. <template>
  4.   <Child ref="child"/>
  5. </template><Child ref="childRef"></Child>
  6. </template><template>
  7. <template>
  8.   <Child ref="child"/>
  9. </template><Child ref="childRef"></Child>
  10. </template>测试1
  11. <template>
  12. <template>
  13.   <Child ref="child"/>
  14. </template><Child ref="childRef"></Child>
  15. </template><template>
  16. <template>
  17.   <Child ref="child"/>
  18. </template><Child ref="childRef"></Child>
  19. </template>测试2
  20. </template>
复制代码

  • Teleport
teleport 组件允许将插槽内容渲染到任意位置，没有父子组件的限制
  1. <Teleport to="#test">
  2. <template>
  3. <template>
  4.   <Child ref="child"/>
  5. </template><Child ref="childRef"></Child>
  6. </template><template>
  7. <template>
  8.   <Child ref="child"/>
  9. </template><Child ref="childRef"></Child>
  10. </template><h1>测试内容</h1>
  11. </Teleport>
复制代码
Props
  1. interface TeleportProps {
  2. <template>
  3. <template>
  4.   <Child ref="child"/>
  5. </template><Child ref="childRef"></Child>
  6. </template><template>
  7. <template>
  8.   <Child ref="child"/>
  9. </template><Child ref="childRef"></Child>
  10. </template>/**
  11. <template>
  12. <template>
  13.   <Child ref="child"/>
  14. </template><Child ref="childRef"></Child>
  15. </template><template>
  16. <template>
  17.   <Child ref="child"/>
  18. </template><Child ref="childRef"></Child>
  19. </template> * 必填项。指定目标容器。
  20. <template>
  21. <template>
  22.   <Child ref="child"/>
  23. </template><Child ref="childRef"></Child>
  24. </template><template>
  25. <template>
  26.   <Child ref="child"/>
  27. </template><Child ref="childRef"></Child>
  28. </template> * 可以是选择器或实际元素。
  29. <template>
  30. <template>
  31.   <Child ref="child"/>
  32. </template><Child ref="childRef"></Child>
  33. </template><template>
  34. <template>
  35.   <Child ref="child"/>
  36. </template><Child ref="childRef"></Child>
  37. </template> */
  38. <template>
  39. <template>
  40.   <Child ref="child"/>
  41. </template><Child ref="childRef"></Child>
  42. </template><template>
  43. <template>
  44.   <Child ref="child"/>
  45. </template><Child ref="childRef"></Child>
  46. </template>to: string | HTMLElement
  47. <template>
  48. <template>
  49.   <Child ref="child"/>
  50. </template><Child ref="childRef"></Child>
  51. </template><template>
  52. <template>
  53.   <Child ref="child"/>
  54. </template><Child ref="childRef"></Child>
  55. </template>/**
  56. <template>
  57. <template>
  58.   <Child ref="child"/>
  59. </template><Child ref="childRef"></Child>
  60. </template><template>
  61. <template>
  62.   <Child ref="child"/>
  63. </template><Child ref="childRef"></Child>
  64. </template> * 当值为 `true` 时，内容将保留在其原始位置
  65. <template>
  66. <template>
  67.   <Child ref="child"/>
  68. </template><Child ref="childRef"></Child>
  69. </template><template>
  70. <template>
  71.   <Child ref="child"/>
  72. </template><Child ref="childRef"></Child>
  73. </template> * 而不是移动到目标容器中。
  74. <template>
  75. <template>
  76.   <Child ref="child"/>
  77. </template><Child ref="childRef"></Child>
  78. </template><template>
  79. <template>
  80.   <Child ref="child"/>
  81. </template><Child ref="childRef"></Child>
  82. </template> * 可以动态更改。
  83. <template>
  84. <template>
  85.   <Child ref="child"/>
  86. </template><Child ref="childRef"></Child>
  87. </template><template>
  88. <template>
  89.   <Child ref="child"/>
  90. </template><Child ref="childRef"></Child>
  91. </template> */
  92. <template>
  93. <template>
  94.   <Child ref="child"/>
  95. </template><Child ref="childRef"></Child>
  96. </template><template>
  97. <template>
  98.   <Child ref="child"/>
  99. </template><Child ref="childRef"></Child>
  100. </template>disabled?: boolean
  101. }
复制代码
访问子组件实例

父组件定义一个变量 childRef 来引用子组件，定义的变量名称和子组件标签定义的 ref 需要一样
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template>
复制代码
父子组件通信


  • 父传子
在 vue2 中我们使用 v-bind + props 的方式向子组件传值
在 vue3 中是使用 v-model + defineProps 的方式向子组件传值。并且支持写多个 v-model
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template>名字：{{name}}
  10. <template>
  11. <template>
  12.   <Child ref="child"/>
  13. </template><Child ref="childRef"></Child>
  14. </template>年龄：{{age}}
复制代码

  • 子传父
在 vue2 中使用 $emit 向父组件传值
在 vue3 中使用 defineEmits 向父组件传值
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template>点击累加<template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template>重置
复制代码

  • 子组件直接修改父组件传过来的数据
在 vue2 中：子组件如果想直接修改父组件传过来数据，需要指定 v-model.sync
在 vue3 中，.sync 被移除了。通过定义一个 emit 事件，指定 update:count 来进行修改数据
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template>更新父组件数据
复制代码

  • 父组件获取子组件的属性或调用子组件的方法
默认情况下，父组件是不可以获取到子组件的属性。如果想这么做的话，我们可以在子组件使用 defineExpose 指定暴露出去的属性
defineExpose 可以指定那些属性、方法被其父组件访问和使用
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template>
复制代码
异步加载组件


  • vue2
  1. const MyComponent = () => import('./MyComponent.vue')
复制代码

  • vue3
  1. import { defineAsyncComponent } from 'vue'
  3. // 会为MyComponent.vue 及其依赖创建一个单独的一个快
  4. // 它只会按需加载 （及改异步组件在页面中被渲染时）
  5. const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'))
复制代码
生命周期


  • vue3 中移除了 beforeCreate 和 created，添加了 setup 函数
  • 所有钩子函数添加一个前缀on
  • 引用方式，因为 vue3 都是模块化，如import {onMounted} from 'vue'
vue2vue3beforeCreate
createdsetup()beforeMount
MountedonBeforeMount
onMountedbeforeUpdate
updatedonBeforeUpdate
onUpdatedbeforeDestroy
destroyedobBeforeUnmount
onUnmountedCSS

css 样式穿透

在 Vue2 中修改子组件或者组件库的样式，都会使用样式穿透 /deep/ .class{}
在 Vue3 中样式穿透的语法变成了 :deep(.class)
  1. [/code][size=3]css 的v-bind[/size]
  3. 在css中使用js的变量来动态写样式
  4. [code]
复制代码
注意： 在 Mouse position is at: {{ x }}, {{ y }}[/code]我们通过上面代码发现，在自定义hooks函数中，我们依然可以使用响应式API、生命周期钩子等，可以实现 mixins 想要的效果
全局API转移

在 vue2 全局API 都是挂载在 Vue.prototype 上
在 vue3 改成了 app.config.globalProperties
  1. const app = createApp(App)app.config.globalProperties.$myGlobalMethod = function () {<template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template>// ...}
复制代码
调用的话：
  1. this.$myGlobalMethod()
复制代码
插槽


  • 默认插槽
子组件写上 ，父组件在引入子组件标签内部写入内容，就会自动填充到子组件上面
比如我们有一个如下的子组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template>头部<template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template><template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template><template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template>尾部
复制代码
父组件调用子组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template>中间的主要内容
  14. <template>
  15. <template>
  16.   <Child ref="child"/>
  17. </template><Child ref="childRef"></Child>
  18. </template>
复制代码

  • 具名插槽
具名插槽适用：当一个组件需要多个插槽，指定某个位置的内容
使用<template>
<template>
  <Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>定义一个插槽，使用<template>
<template>
  <Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>去指定插入的内容
比如我们有一个公共弹窗组件Dialog：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template><template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template><template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template>
复制代码
调用这个弹窗组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template><template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template><template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template>弹窗组件头部
  26. <template>
  27. <template>
  28.   <Child ref="child"/>
  29. </template><Child ref="childRef"></Child>
  30. </template><template>
  31. <template>
  32.   <Child ref="child"/>
  33. </template><Child ref="childRef"></Child>
  34. </template><template>
  35. <template>
  36.   <Child ref="child"/>
  37. </template><Child ref="childRef"></Child>
  38. </template><template>
  39. <template>
  40.   <Child ref="child"/>
  41. </template><Child ref="childRef"></Child>
  42. </template><template>
  43. <template>
  44.   <Child ref="child"/>
  45. </template><Child ref="childRef"></Child>
  46. </template><template>
  47. <template>
  48.   <Child ref="child"/>
  49. </template><Child ref="childRef"></Child>
  50. </template><template>
  51. <template>
  52.   <Child ref="child"/>
  53. </template><Child ref="childRef"></Child>
  54. </template>弹窗组件底部
  55. <template>
  56. <template>
  57.   <Child ref="child"/>
  58. </template><Child ref="childRef"></Child>
  59. </template><template>
  60. <template>
  61.   <Child ref="child"/>
  62. </template><Child ref="childRef"></Child>
  63. </template><template>
  64. <template>
  65.   <Child ref="child"/>
  66. </template><Child ref="childRef"></Child>
  67. </template>
复制代码
具名插槽的缩写：
跟 v-on 和 v-bind 一样，v-slot 也有缩写。比如 v-slot:header 可以简写成 #header，所以我们可以将上面调用代码改成如下：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template><template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template><template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template>弹窗组件头部
  26. <template>
  27. <template>
  28.   <Child ref="child"/>
  29. </template><Child ref="childRef"></Child>
  30. </template><template>
  31. <template>
  32.   <Child ref="child"/>
  33. </template><Child ref="childRef"></Child>
  34. </template><template>
  35. <template>
  36.   <Child ref="child"/>
  37. </template><Child ref="childRef"></Child>
  38. </template><template>
  39. <template>
  40.   <Child ref="child"/>
  41. </template><Child ref="childRef"></Child>
  42. </template><template>
  43. <template>
  44.   <Child ref="child"/>
  45. </template><Child ref="childRef"></Child>
  46. </template><template>
  47. <template>
  48.   <Child ref="child"/>
  49. </template><Child ref="childRef"></Child>
  50. </template><template>
  51. <template>
  52.   <Child ref="child"/>
  53. </template><Child ref="childRef"></Child>
  54. </template>弹窗组件底部
  55. <template>
  56. <template>
  57.   <Child ref="child"/>
  58. </template><Child ref="childRef"></Child>
  59. </template><template>
  60. <template>
  61.   <Child ref="child"/>
  62. </template><Child ref="childRef"></Child>
  63. </template><template>
  64. <template>
  65.   <Child ref="child"/>
  66. </template><Child ref="childRef"></Child>
  67. </template>
复制代码

  • 作用域插槽
子组件可以通过动态绑定的方式，将子组件的值通过插槽传递给父组件
如下一个子组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template>头部<template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template><template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template>
复制代码
父组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template>子组件传递过来的值：{{title}}
  14. <template>
  15. <template>
  16.   <Child ref="child"/>
  17. </template><Child ref="childRef"></Child>
  18. </template>
复制代码

  • 动态插槽
根据条件动态的去匹配，不同名称的插槽位置
举例如下，有一个如下的子组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template><template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template><template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template>头部：<template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template><template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template><template>
  26. <template>
  27.   <Child ref="child"/>
  28. </template><Child ref="childRef"></Child>
  29. </template><template>
  30. <template>
  31.   <Child ref="child"/>
  32. </template><Child ref="childRef"></Child>
  33. </template><template>
  34. <template>
  35.   <Child ref="child"/>
  36. </template><Child ref="childRef"></Child>
  37. </template>主体：<template>
  38. <template>
  39.   <Child ref="child"/>
  40. </template><Child ref="childRef"></Child>
  41. </template><template>
  42. <template>
  43.   <Child ref="child"/>
  44. </template><Child ref="childRef"></Child>
  45. </template><template>
  46. <template>
  47.   <Child ref="child"/>
  48. </template><Child ref="childRef"></Child>
  49. </template><template>
  50. <template>
  51.   <Child ref="child"/>
  52. </template><Child ref="childRef"></Child>
  53. </template><template>
  54. <template>
  55.   <Child ref="child"/>
  56. </template><Child ref="childRef"></Child>
  57. </template><template>
  58. <template>
  59.   <Child ref="child"/>
  60. </template><Child ref="childRef"></Child>
  61. </template>底部：<template>
  62. <template>
  63.   <Child ref="child"/>
  64. </template><Child ref="childRef"></Child>
  65. </template><template>
  66. <template>
  67.   <Child ref="child"/>
  68. </template><Child ref="childRef"></Child>
  69. </template><template>
  70. <template>
  71.   <Child ref="child"/>
  72. </template><Child ref="childRef"></Child>
  73. </template>
复制代码
父组件：
  1. <template>
  2. <template>
  3.   <Child ref="child"/>
  4. </template><Child ref="childRef"></Child>
  5. </template>切换到头部<template>
  6. <template>
  7.   <Child ref="child"/>
  8. </template><Child ref="childRef"></Child>
  9. </template>切换到主体<template>
  10. <template>
  11.   <Child ref="child"/>
  12. </template><Child ref="childRef"></Child>
  13. </template>切换到底部<template>
  14. <template>
  15.   <Child ref="child"/>
  16. </template><Child ref="childRef"></Child>
  17. </template><template>
  18. <template>
  19.   <Child ref="child"/>
  20. </template><Child ref="childRef"></Child>
  21. </template><template>
  22. <template>
  23.   <Child ref="child"/>
  24. </template><Child ref="childRef"></Child>
  25. </template><template>
  26. <template>
  27.   <Child ref="child"/>
  28. </template><Child ref="childRef"></Child>
  29. </template>测试内容<template>
  30. <template>
  31.   <Child ref="child"/>
  32. </template><Child ref="childRef"></Child>
  33. </template>
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
晾棋砷
3 天前

0

粉丝关注

10

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫