devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第三部分：组件基础_基础单元组件

作者：Monodyee | 2024-02-08 15:44:18

赞

踩

基础单元组件

第三单元 组件基础

一、本单元教学目标

（Ⅰ）重点知识目标

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">1. 组件基础
  2. 2. 组件通讯
  3. 3. 插槽slot
  4. 4. 依赖出入
  5. 5. 动态组件 
  6. 6. 异步组件</span></span>

二、本单元知识详讲

3.1.组件基础

3.1.1 什么是组件？为什么要用组件？

组件： 实现应用中局部功能代码和资源的集合。

组件的优点： 帮我们解决依赖关系混乱，不好维护的难题。提高代码的复用率。

3.1.2 什么是组件化？理解组件化

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

3.1.3 如何封装一个vue组件

目标：理解一般思路即可

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。

  1. 先构建组件的模板

  2. 定义组件

  3. 注册组件

  4. 使用组件

3.2 vue3组件注册和使用

3.2.1 构建模板、定义组件。

下面是定义一个组件的代码。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">注意：组件里面的选项api基本上和 createApp() 的选项api一致，所以我们在组件里面也可以用 data，computed，methods ...;
  2.  
  3.  const Header = {
  4.     // template 是模板，里面存放组件的html代码片段。
  5.     template: '<header>头部-{{msg}} - {{ reverseMsg }}</header>', 
  6.     // 可以写任意的属于vue的选项
  7.     data () {
  8.       return {
  9.         msg: 'hello header'
  10.       }
  11.     },
  12.     computed: {
  13.       reverseMsg () {
  14.         return this.msg.split('').reverse().join('')
  15.       }
  16.     }
  17.   }</span></span>

通过上面的代码我们可以发现，如果是比较复杂的 html 片段我们直接写在 template 模板里面，显然有点不合适。有没有更简单的方式呢？请看下面的代码。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"> 特别注意：这段代码不要写在 vue节点作用域内部，不然是不起作用的。
  2.  
  3.  <template id="header">
  4.   <header>头部-{{msg}} - {{ reverseMsg }}</header>
  5. </template></span></span>
  1. <span style="background-color:#f8f8f8"><span style="color:#333333">  const Header = {
  2.     // template 是模板，里面存放组件的html代码片段。
  3.     template: '#header', 
  4.     // 可以写任意的属于vue的选项
  5.     data () {
  6.       return {
  7.         msg: 'hello header'
  8.       }
  9.     },
  10.     computed: {
  11.       reverseMsg () {
  12.         return this.msg.split('').reverse().join('')
  13.       }
  14.     }
  15.   }</span></span>

3.2.2 全局注册组件

我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">import { createApp } from 'vue'
  2.  
  3. const app = createApp({})
  4.  
  5. app.component(
  6.   // 注册的名字
  7.   'MyComponent',
  8.   // 组件的实现
  9.   {
  10.     /* ... */
  11.   }
  12. )</span></span>

app.component() 方法可以被链式调用：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">app
  2.   .component('ComponentA', ComponentA)
  3.   .component('ComponentB', ComponentB)
  4.   .component('ComponentC', ComponentC)</span></span>

全局注册的组件可以在此应用的任意组件的模板中使用

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!-- 这在当前应用的任意组件中都可用 -->
  2. <ComponentA/>
  3. <ComponentB/>
  4. <ComponentC/></span></span>

所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用

完整案例：24_component_vue3.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>24_全局注册组件</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- 04 使用组件 大驼峰式 短横线式  在html文件中只能使用 短横线式  -->
  12.     <!-- 为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。
  13.       这意味着一个以 `MyComponent` 为名注册的组件，在模板中可以通过 `<MyComponent>` 或 `<my-component>` 引用。
  14.         这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。 -->
  15.     <my-header></my-header>
  16.     <!-- <MyHeader></MyHeader> -->
  17.   </div>
  18. </body>
  19. <!-- 01 定义组件的模板 -->
  20. <template id="header">
  21.   <header>头部-{{msg}} - {{ reverseMsg }}</header>
  22. </template>
  23. <script src="lib/vue.global.js"></script>
  24. <script>
  25.   // 02.定义组件 - 首字母大写
  26.   const Header = {
  27.     template: '#header', // 绑定页面的模板 --- 必不可少
  28.     // 可以写任意的属于vue的选项
  29.     data () {
  30.       return {
  31.         msg: 'hello header'
  32.       }
  33.     },
  34.     computed: {
  35.       reverseMsg () {
  36.         return this.msg.split('').reverse().join('')
  37.       }
  38.     }
  39.   }
  40.  
  41.   const { createApp } = Vue
  42.   const app = createApp({
  43.   })
  44.   // 03.全局注册组件 --- app.mount('#app') 之前
  45.   // app.component('MyHeader', Header) // 大驼峰式
  46.   app.component('my-header', Header) // 短横线式
  47.  
  48.   app.mount('#app')
  49. </script>
  50. </html></span></span>

vue2全局注册组件

完整案例:25_component_vue2.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>25_vue2全局注册组件</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- 04 使用组件 大驼峰式 短横线式  在html文件中只能使用 短横线式  -->
  12.     <!-- 为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。
  13.       这意味着一个以 `MyComponent` 为名注册的组件，在模板中可以通过 `<MyComponent>` 或 `<my-component>` 引用。
  14.         这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。 -->
  15.     <my-header></my-header>
  16.     <!-- <MyHeader></MyHeader> -->
  17.   </div>
  18. </body>
  19. <!-- 01 定义组件的模板 -->
  20. <template id="header">
  21.   <header>头部-{{msg}} - {{ reverseMsg }}</header>
  22. </template>
  23. <script src="lib/vue.js"></script>
  24. <script>
  25.   // 02.定义组件 - 首字母大写
  26.   const Header = {
  27.     template: '#header', // 绑定页面的模板 --- 必不可少
  28.     // 可以写任意的属于vue的选项
  29.     data () { // vue2中的所有的组件的 data 必须是函数
  30.       return {
  31.         msg: 'hello header'
  32.       }
  33.     },
  34.     computed: {
  35.       reverseMsg () {
  36.         return this.msg.split('').reverse().join('')
  37.       }
  38.     }
  39.   }
  40.   // 03.全局注册组件 --- new Vue 实例 之前
  41.   // Vue.component('MyHeader', Header) // 大驼峰式
  42.   Vue.component('my-header', Header) // 短横线式
  43.  
  44.   new Vue({}).$mount('#app')
  45. </script>
  46. </html></span></span>

3.2.2 局部注册组件

全局注册虽然很方便，但有以下几个问题：

  1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

  2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

局部注册需要使用 components 选项

对于每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。

完整案例:26_components_vue3.htmlvue3局部注册组件

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>26_vue3 局部注册组件</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- 04 使用组件 大驼峰式 短横线式  在html文件中只能使用 短横线式  -->
  12.     <!-- 为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。
  13.       这意味着一个以 `MyComponent` 为名注册的组件，在模板中可以通过 `<MyComponent>` 或 `<my-component>` 引用。
  14.         这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。 -->
  15.     <my-header></my-header>
  16.     <!-- <MyHeader></MyHeader> -->
  17.   </div>
  18. </body>
  19. <!-- 01 定义组件的模板 -->
  20. <template id="header">
  21.   <header>头部-{{msg}} - {{ reverseMsg }}</header>
  22. </template>
  23. <script src="lib/vue.global.js"></script>
  24. <script>
  25.   // 02.定义组件 - 首字母大写
  26.   const Header = {
  27.     template: '#header', // 绑定页面的模板 --- 必不可少
  28.     // 可以写任意的属于vue的选项
  29.     data () {
  30.       return {
  31.         msg: 'hello header'
  32.       }
  33.     },
  34.     computed: {
  35.       reverseMsg () {
  36.         return this.msg.split('').reverse().join('')
  37.       }
  38.     }
  39.   }
  40.  
  41.   const { createApp } = Vue
  42.  
  43.   const app = createApp({
  44.     components: { // 03 局部注册组件
  45.       // 'my-header': Header
  46.       MyHeader: Header
  47.     }
  48.   })
  49.  
  50.   app.mount('#app')
  51. </script>
  52. </html></span></span>

完整案例:27_components_vue2.htmlvue2局部注册组件

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>27_vue2局部注册组件</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- 04 使用组件 大驼峰式 短横线式  在html文件中只能使用 短横线式  -->
  12.     <!-- 为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。
  13.       这意味着一个以 `MyComponent` 为名注册的组件，在模板中可以通过 `<MyComponent>` 或 `<my-component>` 引用。
  14.         这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。 -->
  15.     <my-header></my-header>
  16.     <!-- <MyHeader></MyHeader> -->
  17.   </div>
  18. </body>
  19. <!-- 01 定义组件的模板 -->
  20. <template id="header">
  21.   <header>头部-{{msg}} - {{ reverseMsg }}</header>
  22. </template>
  23. <script src="lib/vue.js"></script>
  24. <script>
  25.   // 02.定义组件 - 首字母大写
  26.   const Header = {
  27.     template: '#header', // 绑定页面的模板 --- 必不可少
  28.     // 可以写任意的属于vue的选项
  29.     data () { // vue2中的所有的组件的 data 必须是函数
  30.       return {
  31.         msg: 'hello header'
  32.       }
  33.     },
  34.     computed: {
  35.       reverseMsg () {
  36.         return this.msg.split('').reverse().join('')
  37.       }
  38.     }
  39.   }
  40.  
  41.   new Vue({
  42.     components: { // 03 局部注册组件
  43.       // MyHeader: Header
  44.       'my-header': Header
  45.     }
  46.   }).$mount('#app')
  47. </script>
  48. </html></span></span>

局部注册的组件在后代组件中并*不*可用

3.2.3 组件使用注意事项

以上案例使用 PascalCase 作为组件名的注册格式，这是因为：

  1. PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。

  2. <PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来

在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板中是不可用的

为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

3.3 组件嵌套

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>28_父子组件</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <my-parent></my-parent>
  12.     </div>
  13. </body>
  14. <template id="parent">
  15.     <div>
  16.         我是父组件
  17.         <my-child></my-child>
  18.     </div>
  19. </template>
  20. <template id="child">
  21.     <div>
  22.         我是子组件
  23.     </div>
  24. </template>
  25. <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
  26. <script>
  27.     // 定义子组件
  28.     const Child = {
  29.         template: '#child'
  30.     }
  31.     // 定义父组件
  32.     const Parent = {
  33.         template: '#parent',
  34.         components: {
  35.             MyChild: Child //  在父组件中 注册 子组件
  36.         }
  37.     }
  38.  
  39.     const { createApp } = Vue
  40.     const app = createApp({
  41.         components: {// 在根组件Root中注册"父组件"
  42.             MyParent: Parent
  43.         }
  44.     })
  45.     app.mount('#app')
  46. </script>
  47. </html></span></span>

组件间的关系：

  • 父---子

  • 兄---弟

  • 爷---孙

3.4 组件间通信

组件有 分治 的特点，每个组件之间具有一定的独立性，以防止数据混乱，但是在实际工作中使用组件的时候有互相之间传递数据的需求，此时就得考虑如何进行 组件间传值 的问题了。

完整案例:28_parent_child_component.html父子组件

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>28_父子组件</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <my-parent></my-parent>
  12.     </div>
  13. </body>
  14. <template id="parent">
  15.     <div>
  16.         我是父组件 -- {{msg}}
  17.         <my-child></my-child>
  18.     </div>
  19. </template>
  20. <template id="child">
  21.     <div>
  22.         <!-- 子组件也想用父组件的数据 ，可以吗？ -->
  23.         我是子组件 -- {{msg}}
  24.     </div>
  25. </template>
  26. <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
  27. <script>
  28.     const Child = {
  29.         template: '#child'
  30.     }
  31.     const Parent = {
  32.         template: '#parent',
  33.         data(){ //组件实例 也 有保存自己数据的data
  34.             return {
  35.                 msg:'hello' // 父组件的数据
  36.             }
  37.         },
  38.         components: {
  39.             MyChild: Child
  40.         }
  41.     }
  42.  
  43.     const { createApp } = Vue
  44.     const app = createApp({
  45.         components: {
  46.             MyParent: Parent
  47.         }
  48.     })
  49.     app.mount('#app')
  50. </script>
  51. </html></span></span>

通过以上代码发现，组件不能直接访问 Vue根实例中的 data，而且即使可以访问，如果将所有的数据都放在 Vue 根实例中，Vue根实例就会变的非常臃肿。

3.4.1 Prop

学习：状态选项props 以及 实例属性 $attrs

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。

3.4.2 基本语法

  • 父组件通过自定义属性 传递props

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">1、给 prop 传入一个静态的值：
  2. <video-item title="哈哈"></video-item>
  3. 2、动态的值，可以配合v-bind指令进行传递
  4. <video-item :title="title"></video-item></span></span>

  • 子组件中通过props选项 接收值

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">1、字符串数组声明props
  2. {
  3.   props: ['foo'],
  4.   created() {
  5.     // props 会暴露到 `this` 上
  6.     console.log(this.foo)
  7.   }
  8. }
  9.  
  10. 2、对象的形式声明
  11. {
  12.   props: {
  13.     title: String,
  14.     likes: Number
  15.   }
  16. }</span></span>
  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>29_父组件给子组件传值 方式1 - 数组</title>
  8.     <style>
  9.         #app{
  10.             width: 300px;
  11.             height: 220px;
  12.             border: 1px solid #000;
  13.         }
  14.         .child{
  15.             width: 200px;
  16.             height: 150px;
  17.             margin: 30px;
  18.             border: 1px solid #f00;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div id="app">
  24.         我是父组件
  25.         <my-child :movies="movies"></my-child>
  26.     </div>
  27. </body>
  28.  
  29. <template id="child">
  30.     <div class="child">
  31.         我是子组件
  32.         <ul>
  33.             <li v-for="item in movies" :key="item">{{item}}</li>
  34.         </ul>
  35.     </div>
  36. </template>
  37. <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
  38. <script>
  39.     const Child = {
  40.         props: ['movies'],
  41.         template: '#child'
  42.     }
  43.     const { createApp } = Vue
  44.     const app = createApp({
  45.         data() {
  46.             return {
  47.                 movies:['西游记','水浒传','三国演义','白蛇传']
  48.             }
  49.         },
  50.         components: {
  51.             MyChild: Child
  52.         }
  53.     })
  54.     app.mount('#app')
  55. </script>
  56. </html></span></span>

对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。

如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式

<my-com :likeNum="100"></my-com> ===> <my-com :like-num="100"></my-com>

对于组件名我们推荐使用 PascalCase，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说，使用 camelCase 并没有太多优势，因此我们推荐更贴近 HTML 的书写风格-短横线。

完整案例：29_parent_child_component_value1.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>29_父组件给子组件传值 方式1 - 数组</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件
  17.     <!-- 父组件调用子组件的地方，添加自定义的属性,如果属性的值是变量，boolean类型，number类型，对象，数组，null，undefined，需要使用绑定属性 -->
  18.     <my-child :msg="msg" :flag="true" :num="100" :obj="{a: 1, b: 2}" :arr="['a', 'b', 'c']"></my-child>
  19.   </div>
  20. </template>
  21. <template id="child">
  22.   <div>
  23.     我是子组件 - {{ msg }} - {{ flag }} - {{ num }} - {{ obj }} - {{ arr }}
  24.   </div>
  25. </template>
  26. <script src="lib/vue.global.js"></script>
  27. <script>
  28.   // 在定义子组件的地方，添加props选项，
  29.   // props的数据类型为数组，数组的元素即为 自定义的属性名, 之后就可以直接在子组件中通过 自定义的属性名 使用 传递的值
  30.   const Child = {
  31.     props: ['msg', 'flag', 'num', 'obj', 'arr'],
  32.     template: '#child'
  33.   }
  34.   const Parent = {
  35.     template: '#parent',
  36.     components: {
  37.       MyChild: Child
  38.     },
  39.     data () {
  40.       return {
  41.         msg: 'hello parent'
  42.       }
  43.     }
  44.   }
  45.  
  46.   const { createApp } = Vue
  47.   const app = createApp({
  48.     components: {
  49.       MyParent: Parent
  50.     }
  51.   })
  52.   app.mount('#app')
  53. </script>
  54. </html></span></span>

虽然上述案例已经完成了父组件给子组件传值，但是不够严谨

可能A负责父组件的编写，B负责了子

组件的编写，容易造成 不知道 自定义的属性名的 数据类型

3.4.3 数据类型验证

用来对props传递进来的数据进行类型验证：可以设定类型、默认值、是否必填、自定义校验规则等。

验证的 type 类型可以是：String Number Boolean Object Array Function Date Symbol 任何自定义构造函数 或上述内容组成的数组

需要注意的是传递的数据值是null 和 undefined 时，会通过任何类型验证。

案例：指定props数据类型:30_parent_child_component_value2.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>30_父组件给子组件传值 方式2 - 对象-数据类型</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件
  17.     <!-- 父组件调用子组件的地方，添加自定义的属性,如果属性的值是变量，boolean类型，number类型，对象，数组，null，undefined，需要使用绑定属性 -->
  18.     <my-child :msg="msg" :flag="true" :num="100" :obj="{a: 1, b: 2}" :arr="['a', 'b', 'c']"></my-child>
  19.   </div>
  20. </template>
  21. <template id="child">
  22.   <div>
  23.     我是子组件 - {{ msg }} - {{ flag }} - {{ num }} - {{ obj }} - {{ arr }}
  24.   </div>
  25. </template>
  26. <script src="lib/vue.global.js"></script>
  27. <script>
  28.   // 方式2：props的数据类型为对象，对象的key值为自定义的属性名，value值为数据类型(不会阻碍程序运行，警告代码不严谨)
  29.   //      如果一个自定义的属性的值既可以是 String 类型，也可以是 Number类型  key: String | Number
  30.   const Child = {
  31.     props: {
  32.       msg: String,
  33.       flag: Boolean,
  34.       num: String | Number,
  35.       obj: Object,
  36.       arr: Array
  37.     },
  38.     template: '#child'
  39.   }
  40.   const Parent = {
  41.     template: '#parent',
  42.     components: {
  43.       MyChild: Child
  44.     },
  45.     data () {
  46.       return {
  47.         msg: 'hello parent'
  48.       }
  49.     }
  50.   }
  51.  
  52.   const { createApp } = Vue
  53.   const app = createApp({
  54.     components: {
  55.       MyParent: Parent
  56.     }
  57.   })
  58.   app.mount('#app')
  59. </script>
  60. </html></span></span>

现在只能知道哪一个属性是哪一种数据类型，但是有时候我们可以不需要设置 自定义的属性（. ）

<input /> <===> <input type="text" />

3.4.4 自定义校验规则

完整案例: 31_parent_child_component_value3.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>31_父组件给子组件传值 方式3 - 对象-数据类型-默认值</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件
  17.     <!-- 父组件调用子组件的地方，添加自定义的属性,如果属性的值是变量，boolean类型，number类型，对象，数组，null，undefined，需要使用绑定属性 -->
  18.     <my-child :msg="msg" :flag="true" :num="100" :obj="{a: 1, b: 2}" :arr="['a', 'b', 'c']"></my-child>
  19.     <my-child :flag="true" :num="2000" :arr="['aa']"></my-child>
  20.   </div>
  21. </template>
  22. <template id="child">
  23.   <div>
  24.     我是子组件 - {{ msg }} - {{ flag }} - {{ num }} - {{ obj }} - {{ arr }}
  25.   </div>
  26. </template>
  27. <script src="lib/vue.global.js"></script>
  28. <script>
  29.   // 方式3： props的数据类型为对象，对象的key值为自定义的属性名，value值为 一个新的对象
  30.   //      对象的key值可以为 type， 那么value值就为 数据类型
  31.   //      对象的key值可以为 required， 那么value值就为 true / false --- 该属性是不是必须传递,即使有默认值如果未传递还是要报警告
  32.   //      对象的key值可以为 default， 那么value值就为 默认值 -- 如果属性的值是对象和数组，那么默认值设置为函数返回即可
  33.   //      对象的key值可以为 validator 函数 ，可以自定义验证规则，但是不能验证多属性
  34.   const Child = {
  35.     props: {
  36.       msg: {
  37.         type: String,
  38.         required: true,
  39.         default: 'hello vue',
  40.         validator (val) { 
  41.           return val.length > 20
  42.         }
  43.       },
  44.       flag: Boolean,
  45.       num: {
  46.         // type: Number | String,
  47.         type: Number,
  48.         default: 3000,
  49.         validator (val) { // 猜测：不能验证多类型数据 Right-hand side of 'instanceof' is not an object
  50.           return val > 2000
  51.         }
  52.       },
  53.       obj: {
  54.         type: Object,
  55.         default () { return { a: 3, b: 4}}
  56.       },
  57.       arr: {
  58.         type: Array,
  59.         default () { return ['1', '2', '3', '4']},
  60.         validator (val) {
  61.           return val.length > 2
  62.         }
  63.       }
  64.     },
  65.     template: '#child'
  66.   }
  67.   const Parent = {
  68.     template: '#parent',
  69.     components: {
  70.       MyChild: Child
  71.     },
  72.     data () {
  73.       return {
  74.         msg: 'hello parent'
  75.       }
  76.     }
  77.   }
  78.  
  79.   const { createApp } = Vue
  80.   const app = createApp({
  81.     components: {
  82.       MyParent: Parent
  83.     }
  84.   })
  85.   app.mount('#app')
  86. </script>
  87. </html></span></span>

3.4.5 prop的单向数据流

子组件内部不能改变props！！

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.     props:['num'],
  3.     method:{
  4.         inc(){
  5.             console.log(this.num)  // 可以访问 
  6.             this.num++  //  不能改变
  7.         }
  8.     }
  9. }</span></span>

所有的 props 都遵循着单向绑定原则(单项数据流)，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。

目的：这避免子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。

另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

比如在父级和子级分别有一个点击增加一个数据值的按钮，点击父级按钮两边的数据都会改变，点击子级按钮只有子级的改变，但是不管怎么变都是假象，父级一变他也跟着变了（乖乖听爸爸的话）。所以子级是不能自己更改数据的，而且更改了Vue也会报错。

但是有特殊情况，prop是数组或者对象时，更改子级的数据父级也会随着更改，可见prop传的是同一个引用。引用不可以变，但是引用内的值可以变。怎么避免，无法避免，只能是说别更改就对了

3.4.6 $attrs

如果不使用props接收传递过来的值，那么数据就会存在于$attrs中

如果使用了props接收传递过来的值，那么数据就会存在与$props中

$attrs 的用法；

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><template id="child">
  2.   <div>
  3.     我是子组件 {{$attrs}}   // $attrs 是一个属性对象集合，注意：这里的属性不包含 class 和 style
  4.   </div>
  5. </template></span></span>

3.5 emit 监听事件

学习：状态选项emits、实例方法 $emit

作用：用于子组件给父组件传值，主要利用自定义事件

3.5.1 $emit 基础语法

自定义事件流程：

  1. 在子组件中，通过 $emit() 来触发事件

  2. 在父组件中，通过 v-on 来监听子组件事件，同样，组件的事件监听器也支持 .once 修饰符

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>32_子组件给父组件传值</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件
  17.     <!-- 在父组件调用子组件的地方，绑定一个自定义的事件，该事件由父组件实现，默认参数即为子组件传递给父组件的值 -->
  18.     <my-child @my-event="getData"></my-child>
  19.   </div>
  20. </template>
  21. <template id="child">
  22.   <div>
  23.     我是子组件
  24.     <button @click="$emit('my-event', 2000)">传2000</button>
  25.     <button @click="sendData(3000)">传3000</button>
  26.   </div>
  27. </template>
  28. <script src="lib/vue.global.js"></script>
  29. <script>
  30.   // 在子组件的某一个事件内部，通过 this.$emit('自定义的事件名',传递的参数)完成子组件给父组件传值,内联事件处理器中不需要写this
  31.   const Child = {
  32.     template: '#child',
  33.     mounted () {
  34.       this.$emit('my-event', 1000)
  35.     },
  36.     methods: {
  37.       sendData (num) {
  38.         this.$emit('my-event', num)
  39.       }
  40.     }
  41.   }
  42.   const Parent = {
  43.     template: '#parent',
  44.     components: {
  45.       MyChild: Child
  46.     },
  47.     methods: {
  48.       getData (val) {
  49.         console.log('接收到子组件的数据:' + val)
  50.       }
  51.     }
  52.   }
  53.  
  54.   const { createApp } = Vue
  55.   const app = createApp({
  56.     components: {
  57.       MyParent: Parent
  58.     }
  59.   })
  60.   app.mount('#app')
  61. </script>
  62. </html></span></span>

3.5.2 声明触发的事件

组件要触发的事件还可以显式地通过 emits 选项来声明：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2. 	emits: ['inFocus', 'submit']
  3. }</span></span>

这个 emits 选项还支持对象语法，它允许我们对触发事件的参数进行验证：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2. 	 emits: {
  3.         submit(payload) {
  4.           // 通过返回值为 `true` 还是为 `false` 来判断
  5.           // 验证是否通过
  6.         }
  7.       }
  8. }</span></span>

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 this.$emit 的内容，返回一个布尔值来表明事件是否合法。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   emits: {
  3.     // 没有校验
  4.     click: null,
  5.  
  6.     // 校验 submit 事件
  7.     submit: ({ email, password }) => {
  8.       if (email && password) {
  9.         return true
  10.       } else {
  11.         console.warn('Invalid submit event payload!')
  12.         return false
  13.       }
  14.     }
  15.   },
  16.   methods: {
  17.     submitForm(email, password) {
  18.       this.$emit('submit', { email, password })
  19.     }
  20.   }
  21. }</span></span>

完整案例：33_child_parent_component_value2.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>33_子组件给父组件传值-声明触发的事件并且验证</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件
  17.     <!-- 在父组件调用子组件的地方，绑定一个自定义的事件，该事件由父组件实现，默认参数即为子组件传递给父组件的值 -->
  18.     <my-child @my-event="getData"></my-child>
  19.   </div>
  20. </template>
  21. <template id="child">
  22.   <div>
  23.     我是子组件
  24.     <button @click="$emit('my-event', 2000)">传2000</button>
  25.     <button @click="sendData(3000)">传3000</button>
  26.   </div>
  27. </template>
  28. <script src="lib/vue.global.js"></script>
  29. <script>
  30.   // 在子组件的某一个事件内部，通过 this.$emit('自定义的事件名',传递的参数)完成子组件给父组件传值,内联事件处理器中不需要写this
  31.   const Child = {
  32.     template: '#child',
  33.     // emits: ['my-event'],
  34.     emits: {
  35.       'my-event': function (payload) {
  36.         console.log(payload)
  37.         return payload > 2000
  38.       }
  39.     },
  40.     mounted () {
  41.       this.$emit('my-event', 1000)
  42.     },
  43.     methods: {
  44.       sendData (num) {
  45.         this.$emit('my-event', num)
  46.       }
  47.     }
  48.   }
  49.   const Parent = {
  50.     template: '#parent',
  51.     components: {
  52.       MyChild: Child
  53.     },
  54.     methods: {
  55.       getData (val) {
  56.         console.log('接收到子组件的数据:' + val)
  57.       }
  58.     }
  59.   }
  60.  
  61.   const { createApp } = Vue
  62.   const app = createApp({
  63.     components: {
  64.       MyParent: Parent
  65.     }
  66.   })
  67.   app.mount('#app')
  68. </script>
  69. </html></span></span>

3.6 自定义表单组件使用v-model

自定义事件可以用于开发支持 v-model 的自定义表单组件

完整案例：34_custom_form_v-model.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>34_自定义表单组件配合 v-model</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-input v-model="userName" placeholder="用户名"></my-input> {{ userName }}
  12.     <my-input type="password" v-model="password" placeholder="密码"></my-input>{{ password }}
  13.     <my-button @my-click="submit"></my-button>
  14.   </div>
  15. </body>
  16. <template id="input">
  17.   <input :type="type" :placeholder="placeholder" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  18. </template>
  19. <template id="btn">
  20.   <!-- 实际上执行2次，因为子组件模板中只有button -->
  21.   <!-- <button @click="$emit('click')">提交</button> --> 
  22.   <button @click="$emit('my-click')">提交</button>
  23. </template>
  24. <script src="lib/vue.global.js"></script>
  25. <script>
  26.   const Input = {
  27.     template: '#input',
  28.     props: {
  29.       type: {
  30.         type: String,
  31.         default: 'text'
  32.       },
  33.       placeholder: String,
  34.       modelValue: String  // 自定义表单组件 v-model 内部 为 modelValue 属性和 input事件
  35.     },
  36.     emits: ['update:modelValue']
  37.   }
  38.  
  39.   const Button = {
  40.     template: '#btn'
  41.   }
  42.  
  43.   const { createApp } = Vue
  44.  
  45.   const app = createApp({
  46.     components: {
  47.       MyInput: Input,
  48.       MyButton: Button
  49.     },
  50.     data () {
  51.       return {
  52.         userName: '',
  53.         password: ''
  54.       }
  55.     },
  56.     methods: {
  57.       submit () {
  58.         console.log({
  59.           userName: this.userName,
  60.           password: this.password
  61.         })
  62.       }
  63.     }
  64.   })
  65.  
  66.   app.mount('#app')
  67. </script>
  68. </html></span></span>

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的计算属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">const Input = {
  2.   template: `#input`,
  3.   props: ['modelValue'],
  4.   emits: ['update:modelValue'],
  5.   computed: {
  6.     value: {
  7.       get() {
  8.         return this.modelValue
  9.       },
  10.       set(value) {
  11.         this.$emit('update:modelValue', value)
  12.       }
  13.     }
  14.   }
  15. }</span></span>

3.6.1 多个v-model的绑定

仅限于 vue3

完整案例：35_custom_form_v-model_params.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>35_多个 v-model 绑定</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- <my-form v-model:username="username" v-model:password="password"></my-form> -->
  12.     <my-custom v-model:username="username" v-model:password="password"></my-custom>
  13.     <my-button @my-click="submit"></my-button>
  14.   </div>
  15. </body>
  16. <template id="custom">
  17.   <div>
  18.     <input type="text" placeholder="用户名" :value="username" @input="$emit('update:username', $event.target.value)">
  19.     <input type="password" placeholder="密码" :value="password" @input="$emit('update:password', $event.target.value)">
  20.   </div>
  21. </template>
  22. <template id="btn">
  23.   <!-- 实际上执行2次，因为子组件模板中只有button -->
  24.   <!-- <button @click="$emit('click')">提交</button> --> 
  25.   <button @click="$emit('my-click')">提交</button>
  26. </template>
  27. <script src="lib/vue.global.js"></script>
  28. <script>
  29.   const Custom = {
  30.     template: '#custom',
  31.     props: {
  32.       username: String,
  33.       password: String
  34.     },
  35.     emits: ['update:username', 'update:password']
  36.   }
  37.  
  38.   const Button = {
  39.     template: '#btn'
  40.   }
  41.  
  42.   const { createApp } = Vue
  43.  
  44.   const app = createApp({
  45.     components: {
  46.       MyCustom: Custom,
  47.       MyButton: Button
  48.     },
  49.     data () {
  50.       return {
  51.         username: '',
  52.         password: ''
  53.       }
  54.     },
  55.     methods: {
  56.       submit () {
  57.         console.log({
  58.           username: this.username,
  59.           password: this.password
  60.         })
  61.       }
  62.     }
  63.   })
  64.  
  65.   app.mount('#app')
  66. </script>
  67. </html></span></span>

3.7 透传Attribute

“透传 attribute”指的是由父组件传递给一个子组件，却没有被该子组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

3.7.1 attribute继承

当子组件标签上传递了一个未在Prop内注册的数据时，该数据特性会被添加到子组件的根元素上，变成组件根标签的行间属性。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><my-button class="btn"></my-button>
  2.  
  3. 子组件模板只有<button>按钮</button>，那么my-button的class直接透传给子组件
  4.  
  5. <button class="btn"></button></span></span>

这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。

3.7.2 替换已有的属性

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">父组件使用子组件标签的时候传入一个未注册的type属性：
  2. <my-cmp type="text"></my-cmp>
  3. 渲染结果：最终传入的 type="text" 就会替换掉 type="date" 并把它破坏！
  4. <input type="date"></span></span>

3.7.3 class 和 style 的合并

如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!-- <MyButton> 的模板 -->
  2. <button class="btn">click me</button></span></span>

则最后渲染出的 DOM 结果会变成：

<span style="background-color:#f8f8f8"><span style="color:#333333"><button class="btn large">click me</button></span></span>

3.7.4v-on 监听器继承

同样的规则也适用于 v-on 事件监听器：

<span style="background-color:#f8f8f8"><span style="color:#333333"><MyButton @click="onClick" /></span></span>

click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。

3.7.5inheritAttrs禁用继承

如果不希望组件的根元素继承父组件传递的未注册的特性，那么可以在组件选项中设置 inheritAttrs: false。

最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 inheritAttrs 选项为 false，你可以完全控制透传进来的 attribute 被如何使用。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   template: '#parent',
  3.   inheritAttrs: false,
  4.   // ...
  5. })</span></span>

注意：inheritAttrs: false 选项不会影响 style 和 class 的绑定。

3.7.6 多根节点的 Attributes 继承

$attrs 被显式绑定

  • 希望这个属性被添加到其他元素上（默认是添加到根元素），可以配合实例的 $attrs 属性使用

  • $attrs 是根组件传递给子组件所有传递属性的集合，是一个对象，key 为传递的特性名，value 为传递特性值。

<span style="background-color:#f8f8f8"><span style="color:#333333">console.log(this.$attrs)//{ class:"my-cmp" }</span></span>

  • 所以，可以使用 inheritAttrs: false 和 $attrs 相互配合，就可以手动设置这些特性被加到哪个元素上。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   inheritAttrs: false,
  3.   props: ['label', 'value'],
  4.   template: `
  5.     <label>
  6.       {{ label }}
  7.       <input
  8.         v-bind="$attrs" //未注册的属性
  9.         v-bind:value="value"
  10.         v-on:input="$emit('input', $event.target.value)"
  11.       >
  12.     </label>`,
  13. })</span></span>

完整案例: 36_attribute_transmission.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>36_透传attribute</title>
  8.   <style>
  9.     .btn {
  10.       border: 0;
  11.       padding: 10px 20px;
  12.     }
  13.     .btn-success {
  14.       background-color: rgb(29, 198, 29);
  15.       color: #fff;
  16.     }
  17.     .btn-danger {
  18.       background-color: rgb(218, 23, 39);
  19.       color: #fff;
  20.     }
  21.     .btn-primary {
  22.       background-color: rgb(75, 104, 236);
  23.       color: #fff;
  24.     }
  25.   </style>
  26. </head>
  27. <body>
  28.   <div id="app">
  29.     <my-button type="a" class="btn-success" @click="print('success')" @my-event="myalert(1)"></my-button>
  30.     <my-button type="b" class="btn-danger"  @click="print('danger')" @my-event="myalert(2)"></my-button>
  31.     <my-button type="c" class="btn-primary"  @click="print('primary')" @my-event="myalert(3)"></my-button>
  32.   </div>
  33. </body>
  34.  
  35. <template id="button">
  36.   <!-- Attributes 继承(class 与style合并， v-on事件继承) -->
  37.   <!--  <button class="btn">按钮</button> -->
  38.   <!-- 深层组件继承 -->
  39.   <base-button></base-button>
  40. </template>
  41. <template id="base">
  42.   <button class="btn" v-bind="$attrs" >按钮</button>
  43.   <div >测试</button>
  44. </template>
  45. <script src="lib/vue.global.js"></script>
  46. <script>
  47.   const Base = {
  48.     template: '#base',
  49.     mounted () { // 在js中访问透传的 attributes
  50.       console.log('2', this.$attrs)
  51.     },
  52.     // inheritAttrs: false // 不想要一个组件自动地继承 attribute，你可以在组件选项中设置
  53.   }
  54.   const Button = {
  55.     template: '#button',
  56.     components: {
  57.       BaseButton: Base
  58.     },
  59.     mounted () {
  60.       console.log('1', this.$attrs)
  61.     },
  62.   }
  63.   
  64.   const { createApp } = Vue
  65.   const app = createApp({
  66.     components: {
  67.       MyButton: Button
  68.     },
  69.     methods: {
  70.       print (msg) {
  71.         console.log(msg)
  72.       }
  73.     },
  74.     myalert (num) {
  75.       alert(num)
  76.     }
  77.   })
  78.   app.mount('#app')
  79. </script>
  80. </html></span></span>

3.8 特殊Attribute -ref

学习：实例属性refs

用于注册模板引用。

ref 用于注册元素或子组件的引用。

使用选项式 API，引用将被注册在组件的 this.$refs 对象里

放在DOM元素上，获取DOM节点，放到组件上，获取子组件的实例，可以直接使用子组件的属性和方法

完整案例:37_attribute_ref.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>37_特殊的attribute——ref</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- ref用到自定义组件，可以获取到子组件的实例 -->
  12.     <my-child ref="childRef"></my-child>
  13.     <!-- 原生jsDOM操作 -->
  14.     <input type="text" id="userName" @input="getJsData">
  15.     <!-- ref用到DOM元素上，可以获取到当前的DOM元素 -->
  16.     <input type="text" ref="password" @input="getRefData">
  17.   </div>
  18. </body>
  19. <template id="child">
  20.   <div>
  21.     <h1>使用ref获取子组件的实例</h1>
  22.   </div>
  23. </template>
  24.  
  25. <script src="lib/vue.global.js"></script>
  26. <script>
  27.   const Child = {
  28.     template: '#child',
  29.     data () {
  30.       return {
  31.         count: 10
  32.       }
  33.     },
  34.     computed: {
  35.       doubleCount () {
  36.         return this.count * 2
  37.       }
  38.     },
  39.     methods: {
  40.       print () {
  41.         console.log(this.count)
  42.       }
  43.     }
  44.   }
  45.  
  46.   const { createApp } = Vue
  47.  
  48.   const app = createApp({
  49.     components: {
  50.       MyChild: Child
  51.     },
  52.     mounted () {
  53.       console.log(this)
  54.       // 父组件可以通过 ref 直接获取到子组件的实例的属性和方法等
  55.       console.log(this.$refs.childRef.count)
  56.       console.log(this.$refs.childRef.doubleCount)
  57.       this.$refs.childRef.print()
  58.     },
  59.     methods: {
  60.       getJsData () {
  61.         console.log(document.getElementById('userName').value)
  62.       },
  63.       getRefData () {
  64.         console.log(this.$refs.password.value)
  65.       }
  66.     }
  67.   })
  68.  
  69.   app.mount('#app')
  70. </script>
  71. </html></span></span>

3.9 $parent

当前组件可能存在的父组件实例，如果当前组件是顶层组件，则为 null。

完整案例38_parent.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>38_parent</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件
  17.     <my-child></my-child>
  18.   </div>
  19. </template>
  20. <template id="child">
  21.   <div>
  22.     我是子组件 - {{ $parent.msg }}
  23.     <button @click="$parent.print()">执行</button>
  24.     <button @click="test">执行</button>
  25.   </div>
  26. </template>
  27. <script src="lib/vue.global.js"></script>
  28. <script>
  29.   const Child = {
  30.     template: '#child',
  31.     methods: {
  32.       test () {
  33.         this.$parent.print()
  34.       }
  35.     }
  36.   }
  37.   const Parent = {
  38.     template: '#parent',
  39.     components: {
  40.       MyChild: Child
  41.     },
  42.     data () {
  43.       return {
  44.         msg: 'hello parent'
  45.       }
  46.     },
  47.     methods: {
  48.       print () {
  49.         console.log(this.msg)
  50.       }
  51.     }
  52.   }
  53.  
  54.   const { createApp } = Vue
  55.  
  56.   const app = createApp({
  57.     components: {
  58.       MyParent: Parent
  59.     }
  60.   })
  61.  
  62.   app.mount('#app')
  63. </script>
  64. </html></span></span>

3.10 $root

当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。

完整案例:39_root.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>39_root </title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-parent></my-parent>
  12.   </div>
  13. </body>
  14. <template id="parent">
  15.   <div>
  16.     我是父组件 --- {{ $root.count }}
  17.     <my-child></my-child>
  18.   </div>
  19. </template>
  20. <template id="child">
  21.   <div>
  22.     我是子组件 --- {{ $root.count }}
  23.     <button @click="$root.add()">加</button>
  24.   </div>
  25. </template>
  26. <script src="lib/vue.global.js"></script>
  27. <script>
  28.   const Child = {
  29.     template: '#child',
  30.     created () {
  31.       console.log('child', this.$root)
  32.     }
  33.   }
  34.   const Parent = {
  35.     template: '#parent',
  36.     components: {
  37.       MyChild: Child
  38.     },
  39.     created () {
  40.       console.log('parent', this.$root)
  41.     }
  42.   }
  43.  
  44.   const { createApp } = Vue
  45.  
  46.   const app = createApp({
  47.     components: {
  48.       MyParent: Parent
  49.     },
  50.     data () {
  51.       return {
  52.         count: 100
  53.       }
  54.     },
  55.     methods: {
  56.       add () {
  57.         this.count++
  58.       }
  59.     }
  60.   })
  61.   app.mount('#app')
  62. </script>
  63. </html></span></span>

3.11 非父子组件传值

兄弟组件传值 - 中央事件总线传值 ---- vue2

完整案例：40_brother_value-vue2.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>40_vue2 兄弟组件传值</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-content></my-content>
  12.     <my-footer></my-footer>
  13.   </div>
  14. </body>
  15. <script src="lib/vue.js"></script>
  16. <script>
  17.   const bus = new Vue() // 中央事件总线传值
  18.  
  19.   const Content = {
  20.     template: `<div>{{ type }}</div>`,
  21.     data () {
  22.       return {
  23.         type: '首页'
  24.       }
  25.     },
  26.     mounted () {
  27.       bus.$on('change-type', (val) => {
  28.         this.type = val
  29.       })
  30.     }
  31.   }
  32.  
  33.   const Footer = {
  34.     template: `
  35.       <footer>
  36.         <ul>
  37.           <li @click="changeType('首页')">首页</li>  
  38.           <li @click="changeType('分类')">分类</li>  
  39.           <li @click="changeType('购物车')">购物车</li>  
  40.           <li @click="changeType('我的')">我的</li>  
  41.         </ul>
  42.       </footer>
  43.     `,
  44.     methods: {
  45.       changeType (type) {
  46.         bus.$emit('change-type', type)
  47.       }
  48.     }
  49.   }
  50.  
  51.   new Vue({
  52.     components: {
  53.       MyContent: Content,
  54.       MyFooter: Footer
  55.     }
  56.   }).$mount('#app')
  57. </script>
  58. </html></span></span>

vue3中没有明确的兄弟组件传值的方案，可以使用状态提升（找到这两个组件共同的父级组件，然后通过父与子之间的传值实现）

完整案例：41_brother_value-vue3.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>41_vue3 兄弟组件传值-状态提升</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-content :type="type" ></my-content>
  12.     <my-footer @change-type="getVal"></my-footer>
  13.   </div>
  14. </body>
  15. <script src="lib/vue.global.js"></script>
  16. <script>
  17.   const Content = {
  18.     props: ['type'],
  19.     template: `<div>{{ type }}</div>`,
  20.   }
  21.  
  22.   const Footer = {
  23.     template: `
  24.       <footer>
  25.         <ul>
  26.           <li @click="changeType('首页')">首页</li>  
  27.           <li @click="changeType('分类')">分类</li>  
  28.           <li @click="changeType('购物车')">购物车</li>  
  29.           <li @click="changeType('我的')">我的</li>  
  30.         </ul>
  31.       </footer>
  32.     `,
  33.     methods: {
  34.       changeType (type) {
  35.        this.$emit('change-type', type)
  36.       }
  37.     }
  38.   }
  39.  
  40.   Vue.createApp({
  41.     components: {
  42.       MyContent: Content,
  43.       MyFooter: Footer
  44.     },
  45.     data () {
  46.       return {
  47.         type: '首页'
  48.       }
  49.     },
  50.     methods: {
  51.       getVal (type) {
  52.         this.type = type
  53.       }
  54.     }
  55.   }).mount('#app')
  56. </script>
  57. </html></span></span>

后期脚手架中可以使用 一个库 -> mitt。

3.12 插槽slot

为什么要使用插槽？我们可以看看下面的图，通过分析我们看一下怎么解决这个问题。

A页面图

B页面图

C页面图

组件的最大特性就是 重用 ，而用好插槽能大大提高组件的可重用能力。

插槽的作用：父组件向子组件传递内容。

通俗的来讲，插槽无非就是在 子组件 中挖个坑，坑里面放什么东西由 父组件 决定。

插槽类型有：

  • 单个（匿名）插槽

  • 具名插槽

  • 作用域插槽

3.12.1 插槽内容与插口<slot>

在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。

这里有一个 <FancyButton> 组件，可以像这样使用：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><FancyButton>
  2.   <h1>Click me!</h1> <!-- 插槽内容 -->
  3. </FancyButton></span></span>

而 <FancyButton> 的模板是这样的：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><button class="fancy-btn">
  2.   <slot></slot> <!-- 插槽出口 -->
  3. </button></span></span>

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

最终渲染出的 DOM 是这样：

<span style="background-color:#f8f8f8"><span style="color:#333333"><button class="fancy-btn">Click me!</button></span></span>

完整案例：42_slot.html 

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>42_插槽</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <fancy-button>
  12.       click me <!-- 插槽内容 -->
  13.     </fancy-button>
  14.     <fancy-button>
  15.       登录 <!-- 插槽内容 -->
  16.     </fancy-button>
  17.     <fancy-button>
  18.       注册 <!-- 插槽内容 -->
  19.     </fancy-button>
  20.   </div>
  21. </body>
  22. <template id="btn">
  23.   <button>
  24.     <slot></slot> <!-- 插槽出口 -->
  25.   </button>
  26. </template>
  27. <script src="lib/vue.global.js"></script>
  28. <script>
  29.   const { createApp } = Vue
  30.  
  31.   const Button = {
  32.     template: '#btn'
  33.   }
  34.  
  35.   const app = createApp({
  36.     components: {
  37.       FancyButton: Button
  38.     }
  39.   })
  40.  
  41.   app.mount('#app')
  42. </script>
  43. </html></span></span>

3.12.2 渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。举例来说：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><span>{{ message }}</span>
  2. <FancyButton>{{ message }}</FancyButton></span></span>

这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。换言之：

父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

完整案例：43_slot_render_scope.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>43_插槽渲染作用域</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <div>{{ message }}</div>
  12.     <fancy-button>
  13.       {{ message }}<!-- 插槽内容 -->
  14.     </fancy-button>
  15.     
  16.   </div>
  17. </body>
  18. <template id="btn">
  19.   <button>
  20.     <slot></slot> <!-- 插槽出口 -->
  21.   </button>
  22. </template>
  23. <script src="lib/vue.global.js"></script>
  24. <script>
  25.   const { createApp } = Vue
  26.  
  27.   const Button = {
  28.     template: '#btn'
  29.   }
  30.  
  31.   const app = createApp({
  32.     components: {
  33.       FancyButton: Button
  34.     },
  35.     data () {
  36.       return {
  37.         message: 'hello slot render scope!'
  38.       }
  39.     }
  40.   })
  41.  
  42.   app.mount('#app')
  43. </script>
  44. </html></span></span>

3.12.3 默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容。比如有这样一个 <SubmitButton> 组件：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><button type="submit">
  2.   <slot></slot>
  3. </button></span></span>

如果我们想在父组件没有提供任何插槽内容时在 <button> 内渲染“Submit”，只需要将“Submit”写在 <slot> 标签之间来作为默认内容：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><button type="submit">
  2.   <slot>
  3.     Submit <!-- 默认内容 -->
  4.   </slot>
  5. </button></span></span>

现在，当我们在父组件中使用 <SubmitButton> 且没有提供任何插槽内容时：

<span style="background-color:#f8f8f8"><span style="color:#333333"><SubmitButton /></span></span>

“Submit”将会被作为默认内容渲染：

<span style="background-color:#f8f8f8"><span style="color:#333333"><button type="submit">Submit</button></span></span>

但如果我们提供了插槽内容：

<span style="background-color:#f8f8f8"><span style="color:#333333"><SubmitButton>Save</SubmitButton></span></span>

那么被显式提供的内容会取代默认内容：

<span style="background-color:#f8f8f8"><span style="color:#333333"><button type="submit">Save</button></span></span>

完整案例：44_slot_default.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>44_插槽默认内容</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <fancy-button>
  12.       click me <!-- 插槽内容 -->
  13.     </fancy-button>
  14.     <fancy-button>
  15.       登录 <!-- 插槽内容 -->
  16.     </fancy-button>
  17.     <fancy-button></fancy-button>
  18.   </div>
  19. </body>
  20. <template id="btn">
  21.   <button>
  22.     <slot>按钮</slot> <!-- 插槽出口，给slot内写入内容作为插槽的默认值 -->
  23.   </button>
  24. </template>
  25. <script src="lib/vue.global.js"></script>
  26. <script>
  27.   const { createApp } = Vue
  28.  
  29.   const Button = {
  30.     template: '#btn'
  31.   }
  32.  
  33.   const app = createApp({
  34.     components: {
  35.       FancyButton: Button
  36.     }
  37.   })
  38.  
  39.   app.mount('#app')
  40. </script>
  41. </html></span></span>

3.12.4 具名插槽（v-slot属性，#简写）

有时在一个组件中包含多个插槽出口是很有用的。举例来说，在一个 <BaseLayout> 组件中，有如下模板：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><div class="container">
  2.   <header>
  3.     <!-- 标题内容放这里 -->
  4.   </header>
  5.   <main>
  6.     <!-- 主要内容放这里 -->
  7.   </main>
  8.   <footer>
  9.     <!-- 底部内容放这里 -->
  10.   </footer>
  11. </div></span></span>

对于这种场景，<slot> 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><div class="container">
  2.   <header>
  3.     <slot name="header"></slot>
  4.   </header>
  5.   <main>
  6.     <slot></slot>
  7.   </main>
  8.   <footer>
  9.     <slot name="footer"></slot>
  10.   </footer>
  11. </div></span></span>

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”。

在父组件中使用 <BaseLayout> 时，我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了：

要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><BaseLayout>
  2.   <template v-slot:header>
  3.     <!-- header 插槽的内容放这里 -->
  4.   </template>
  5. </BaseLayout></span></span>

v-slot 有对应的简写 #，因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。

完整案例：45_slot_name.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>45_具名插槽</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <base-layout>
  12.       <template v-slot:header>首页头部</template>
  13.       <template v-slot:default>首页内容</template>
  14.       <template v-slot:footer>首页底部</template>
  15.     </base-layout>
  16.     <hr />
  17.     <base-layout>
  18.       <template v-slot:default>分类内容</template>
  19.     </base-layout>
  20.     <hr />
  21.     <base-layout>
  22.       <template #header>我的头部</template>
  23.       <template #default>我的内容</template>
  24.       <template #footer>我的底部</template>
  25.     </base-layout>
  26.  
  27.     <!-- vue2.7 版本以前,现在不会走具名插槽 -->
  28.     <base-layout>
  29.       <div slot="header">vue2.6头部</div>
  30.       <div slot="default">vue2.6内容</div>
  31.       <div slot="footer">vue2.6底部</div>
  32.     </base-layout>
  33.  
  34.   </div>
  35. </body>
  36. <template id="layout">
  37.   <div class="container">
  38.     <header class="header">
  39.       <slot name="header">header</slot>
  40.     </header>
  41.     <div class="content">
  42.       <!-- 不写name时，相当于 写了name="default" -->
  43.       <slot>content</slot>
  44.     </div>
  45.     <footer class="footer">
  46.       <slot name="footer">footer</slot>
  47.     </footer>
  48.   </div>
  49. </template>
  50. <script src="lib/vue.global.js"></script>
  51. <script>
  52.   const { createApp } = Vue
  53.  
  54.   const Layout = {
  55.     template: '#layout'
  56.   }
  57.  
  58.   const app = createApp({
  59.     components: {
  60.       BaseLayout: Layout
  61.     }
  62.   })
  63.  
  64.   app.mount('#app')
  65. </script>
  66. </html></span></span>

3.12.5 动态插槽名

动态指令参数在 v-slot 上也是有效的，即可以定义下面这样的动态插槽名：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><base-layout>
  2.   <template v-slot:[dynamicSlotName]>
  3.     ...
  4.   </template>
  5.  
  6.   <!-- 缩写为 -->
  7.   <template #[dynamicSlotName]>
  8.     ...
  9.   </template>
  10. </base-layout></span></span>

注意这里的表达式和动态指令参数受相同的语法限制。

完整案例：46_dynamic_slot_name.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>46_动态插槽名</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <button @click="count++">{{ count }}</button>
  12.     <my-com>
  13.       <template v-slot:[type]>
  14.         {{ type }} 父组件默认值
  15.       </template>
  16.     </my-com>
  17.     
  18.   </div>
  19. </body>
  20. <template id="com">
  21.   <div >
  22.     <slot name="dynFirst"> 1 动态插槽名   子组件默认值 1</slot>
  23.     <br />
  24.     <slot name="dynLast"> 2 动态插槽名   子组件默认值 2</slot>
  25.   </div>
  26. </template>
  27. <script src="lib/vue.global.js"></script>
  28. <script>
  29.   const { createApp } = Vue
  30.  
  31.   const Com = {
  32.     template: '#com'
  33.   }
  34.  
  35.   const app = createApp({
  36.     components: {
  37.       MyCom: Com
  38.     },
  39.     data () {
  40.       return {
  41.         count: 0
  42.       }
  43.     },
  44.     computed: {
  45.       type () {
  46.         return this.count % 2 === 0 ? 'dynLast': 'dynFirst'
  47.       }
  48.     }
  49.   })
  50.  
  51.   app.mount('#app')
  52. </script>
  53. </html></span></span>

3.12.6 作用域插槽

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

完整案例：47_scope_slot.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>47_作用域插槽(配合具名插槽)</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-com>
  12.       <!-- <template v-slot:test="testProps">作用域插槽以及具名插槽-{{testProps.message}}- {{ testProps.count }}</template> -->
  13.       <!-- <template #test="testProps">作用域插槽以及具名插槽-{{testProps.message}}- {{ testProps.count }}</template> -->
  14.       <template #test="{ message, count }">作用域插槽以及具名插槽-{{message}}- {{ count }}</template>
  15.     </my-com>
  16.     <my-com1>
  17.       <!-- <template v-slot="slotProps">作用域插槽-{{slotProps.message}}- {{ slotProps.count }}</template> -->
  18.       <!-- <template v-slot="{ message, count }">作用域插槽-{{message}}- {{ count }}</template> -->
  19.       <!-- <template #="{ message, count }">作用域插槽-{{message}}- {{ count }}</template> -->
  20.       <template #default="{ message, count }">作用域插槽-{{message}}- {{ count }}</template>
  21.     </my-com1>
  22.   </div>
  23. </body>
  24. <template id="com">
  25.   <div>
  26.     <!-- 一旦使用了具名插槽，在使用作用域插槽时 v-slot:具名="属性名" -->
  27.     <slot name="test" :message="message" :count="1"></slot>
  28.   </div>
  29. </template>
  30. <template id="com1">
  31.   <div>
  32.      <!-- 没有使用具名插槽，在使用作用域插槽时 v-slot="属性名" -->
  33.     <slot :message="message" :count="1"></slot>
  34.   </div>
  35. </template>
  36. <script src="lib/vue.global.js"></script>
  37. <script>
  38.   const { createApp } = Vue
  39.  
  40.   const Com = {
  41.     template: '#com',
  42.     data () {
  43.       return {
  44.         message: 'hello msg'
  45.       }
  46.     }
  47.   }
  48.   const Com1 = {
  49.     template: '#com1',
  50.     data () {
  51.       return {
  52.         message: 'hello msg1'
  53.       }
  54.     }
  55.   }
  56.   
  57.  
  58.   const app = createApp({
  59.     components: {
  60.       MyCom: Com,
  61.       MyCom1: Com1
  62.     }
  63.   })
  64.  
  65.   app.mount('#app')
  66. </script>
  67. </html></span></span>

3.12.7 $slots

一个表示父组件所传入插槽的对象。

通常用于手写渲染函数，但也可用于检测是否存在插槽。

每一个插槽都在 this.$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this.$slots.default。

如果插槽是一个作用域插槽，传递给该插槽函数的参数可以作为插槽的 prop 提供给插槽。

在渲染函数中，可以通过 this.$slots 来访问插槽：

完整案例：48_$slot.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>48_$slots渲染函数</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-com>
  12.       <template #default>1111</template>
  13.       <template #footer>2222</template>
  14.     </my-com>
  15.   </div>
  16. </body>
  17. <template id="com">
  18.   <div><slot>默认值</slot></div>
  19.   <div><slot name="footer">底部默认值</slot></div>
  20. </template>
  21. <script src="lib/vue.global.js"></script>
  22. <script>
  23.   const { createApp, h } = Vue // h 代表创建一个元素 createElement
  24.  
  25.   const Com = {
  26.     // template: '#com'
  27.     render () {
  28.       console.log(this.$slots)
  29.       return [
  30.         h('div', { class: 'content'}, this.$slots.default()), // <div calss="content"><slot></slot></div>
  31.         h('div', { class: 'footer'}, this.$slots.footer()) // <div class="footer"><slot name="footer"></slot></div>
  32.       ]
  33.     }
  34.   }
  35.  
  36.   const app = createApp({
  37.     components: {
  38.       MyCom: Com
  39.     }
  40.   })
  41.   app.mount('#app')
  42. </script>
  43. </html></span></span>

3.13 依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：

注意，虽然这里的 <Footer> 组件可能根本不关心这些 props，但为了使 <DeepChild> 能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。

provide 和 inject 可以帮助我们解决这一问题。 [1] 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

3.13.1 provide

要为组件后代提供数据，需要使用到 provide 选项：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   provide: {
  3.     message: 'hello!'
  4.   }
  5. }</span></span>

对于 provide 对象上的每一个属性，后代组件会用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据。

如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性)，那么可以以函数形式使用 provide：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   data() {
  3.     return {
  4.       message: 'hello!'
  5.     }
  6.   },
  7.   provide() {
  8.     // 使用函数的形式，可以访问到 `this`
  9.     return {
  10.       message: this.message
  11.     }
  12.   }
  13. }</span></span>

这不会使注入保持响应性（比如祖先组件中有一个count的状态，祖先组件修改完状态，后代组件默认的值没有响应式的改变）

3.13.2 inject

要注入上层组件提供的数据，需使用 inject 选项来声明：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   inject: ['message'],
  3.   created() {
  4.     console.log(this.message) // injected value
  5.   }
  6. }</span></span>

注入会在组件自身的状态之前被解析，因此你可以在 data() 中访问到注入的属性：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">{
  2.   inject: ['message'],
  3.   data() {
  4.     return {
  5.       // 基于注入值的初始数据
  6.       fullMessage: this.message
  7.     }
  8.   }
  9. }</span></span>

当以数组形式使用 inject，注入的属性会以同名的 key 暴露到组件实例上。在上面的例子中，提供的属性名为 "message"，注入后以 this.message 的形式暴露。访问的本地属性名和注入名是相同的。

如果我们想要用一个不同的本地属性名注入该属性，我们需要在 inject 选项的属性上使用对象的形式：

  1. <span style="background-color:#f8f8f8">{
  2.  inject: {
  3.      /* 本地属性名 */ 
  4.      localMessage: {
  5.      	from: /* 注入来源名 */ 'message'
  6.  	}
  7.  }
  8. }</span>

这里，组件本地化了原注入名 "message" 所提供的的属性，并将其暴露为 this.localMessage。

默认情况下，inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供，则会抛出一个运行时警告。

如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和 props 类似：

  1. <span style="background-color:#f8f8f8">{
  2.  // 当声明注入的默认值时
  3.  // 必须使用对象形式
  4.  inject: {
  5.      message: {
  6.          from: 'message', // 当与原注入名同名时，这个属性是可选的
  7.          default: 'default value'
  8.      },
  9.      user: {
  10.          // 对于非基础类型数据，如果创建开销比较大，或是需要确保每个组件实例
  11.          // 需要独立数据的，请使用工厂函数
  12.          default: () => ({ name: 'John' })
  13.      }
  14.  }
  15. }</span>

完整案例：49_provide_inject.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>49_依赖注入</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <button @click="count++">加1</button> {{ count }}
  12.     <my-parent></my-parent>
  13.   </div>
  14. </body>
  15. <template id="parent">
  16.   <div>
  17.     我是父组件 - {{ message }}
  18.     <my-child></my-child>
  19.   </div>
  20. </template>
  21. <template id="child">
  22.   <div>
  23.     我是子组件 - {{ myMessage }} - {{ count }}
  24.   </div>
  25. </template>
  26. <script src="lib/vue.global.js"></script>
  27. <script>
  28.   const Child = {
  29.     template: '#child',
  30.     inject: {
  31.       myMessage: { // 替换本地名字，
  32.         from: 'message'
  33.       },
  34.       count: {
  35.         default: 100
  36.       }
  37.     }
  38.   }
  39.   const Parent = {
  40.     template: '#parent',
  41.     inject: ['message'],
  42.     components: {
  43.       MyChild: Child
  44.     }
  45.   }
  46.  
  47.   const { createApp } = Vue
  48.  
  49.   const app = createApp({
  50.     components: {
  51.       MyParent: Parent
  52.     },
  53.     data () {
  54.       return {
  55.         message: '传家宝',
  56.         count: 1
  57.       }
  58.     },
  59.     provide () {
  60.       return {
  61.         message: this.message,
  62.         count: this.count
  63.       }
  64.     }
  65.   })
  66.  
  67.   app.mount('#app')
  68. </script>
  69. </html></span></span>

发现以上案例在count值发生改变时没有更新后代数据

3.13.3 配合响应性 computed()

为保证注入方和供给方之间的响应性链接，我们需要使用 computed() 函数提供一个计算属性

完整案例：50_provide_inject_computed_vue3.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>50_依赖注入配合响应式</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <button @click="count++">加1</button> {{ count }}
  12.     <my-parent></my-parent>
  13.   </div>
  14. </body>
  15. <template id="parent">
  16.   <div>
  17.     我是父组件 - {{ message }}
  18.     <my-child></my-child>
  19.   </div>
  20. </template>
  21. <template id="child">
  22.   <div>
  23.     我是子组件 - {{ myMessage }} - {{ count }}
  24.   </div>
  25. </template>
  26. <script src="lib/vue.global.js"></script>
  27. <script>
  28.   const Child = {
  29.     template: '#child',
  30.     inject: {
  31.       myMessage: { // 替换本地名字，
  32.         from: 'message'
  33.       },
  34.       count: {
  35.         default: 100
  36.       }
  37.     }
  38.   }
  39.   const Parent = {
  40.     template: '#parent',
  41.     inject: ['message'],
  42.     components: {
  43.       MyChild: Child
  44.     }
  45.   }
  46.  
  47.   const { createApp, computed } = Vue
  48.  
  49.   const app = createApp({
  50.     components: {
  51.       MyParent: Parent
  52.     },
  53.     data () {
  54.       return {
  55.         message: '传家宝',
  56.         count: 1
  57.       }
  58.     },
  59.     provide () {
  60.       return {
  61.         message: this.message,
  62.         // count: this.count
  63.         count: computed(() => this.count) // 响应式关键
  64.       }
  65.     }
  66.   })
  67.  
  68.   app.mount('#app')
  69. </script>
  70. </html></span></span>

测试得知vue2中也是如此处理数据

50_provide_inject_computed_vue2.html

  1. <span style="background-color:#f8f8f8"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>50_依赖注入配合响应式</title>
  8. </head>
  9. <body>
  10. <div id="app">
  11.   <button @click="count++">加1</button> {{ count }}
  12.   <my-parent></my-parent>
  13. </div>
  14. </body>
  15. <template id="parent">
  16. <div>
  17.   我是父组件 - {{ message }}
  18.   <my-child></my-child>
  19. </div>
  20. </template>
  21. <template id="child">
  22. <div>
  23.   我是子组件 - {{ myMessage }} - {{ count }}
  24. </div>
  25. </template>
  26. <script src="lib/vue.js"></script>
  27. <script>
  28. const Child = {
  29.   template: '#child',
  30.   inject: {
  31.       myMessage: { // 替换本地名字，
  32.         from: 'message'
  33.       },
  34.       count: {
  35.         default: 100
  36.       }
  37.   }
  38. }
  39. const Parent = {
  40.   template: '#parent',
  41.   inject: ['message'],
  42.   components: {
  43.       MyChild: Child
  44.   }
  45. }
  46. // console.log(Vue.computed)
  47. const { computed } = Vue
  48.  
  49. new Vue({
  50.   components: {
  51.       MyParent: Parent
  52.   },
  53.   data: {
  54.       message: '传家宝',
  55.       count: 1
  56.   },
  57.   provide() {
  58.       return {
  59.         message: this.message,
  60.         // count: this.count
  61.         count: computed(() => this.count) // 响应式关键
  62.       }
  63.   }
  64. }).$mount('#app')
  65. </script>
  66. </html></span>

3.14 动态组件

有些场景会需要在两个组件间来回切换(Tab切换)

3.14.1 特殊 Attribute—is

用于绑定动态组件。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!-- currentTab 改变时组件也改变 --> 
  2. <component :is="currentTab"></component></span></span>

完整案例：51_dynamic_component.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>51_动态组件</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <ul>
  12.       <li @click="currentTab='Home'">首页</li>
  13.       <li @click="currentTab='Kind'">分类</li>
  14.       <li @click="currentTab='Cart'">购物车</li>
  15.     </ul>
  16.  
  17.     <!-- 动态组件 -->
  18.     <component :is="currentTab"></component>
  19.   </div>
  20. </body>
  21. <script src="lib/vue.global.js"></script>
  22. <script>
  23.   const Home = {
  24.     template: `<div>
  25.         首页 <input />
  26.       </div>`
  27.   }
  28.   const Kind = {
  29.     template: `<div>
  30.         分类 <input />
  31.       </div>`
  32.   }
  33.   const Cart = {
  34.     template: `<div>
  35.         购物车 <input />
  36.       </div>`
  37.   }
  38.  
  39.   Vue.createApp({
  40.     components: { Home, Kind, Cart },
  41.     data () {
  42.       return {
  43.         currentTab: 'Home'
  44.       }
  45.     }
  46.   }).mount('#app')
  47. </script> 
  48. </html></span></span>

如果此时给每个组件加入一个输入框，输入内容切换组件查看效果，发现切换回来数据不在

3.14.2 <KeepAlive>组件

缓存包裹在其中的动态切换组件

<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。

任何时候都只能有一个活跃组件实例作为 <KeepAlive> 的直接子节点。

完整案例：52_keep-alive.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>52_keep-alive</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <ul>
  12.       <li @click="currentTab='Home'">首页</li>
  13.       <li @click="currentTab='Kind'">分类</li>
  14.       <li @click="currentTab='Cart'">购物车</li>
  15.     </ul>
  16.  
  17.     <!-- 动态组件 -->
  18.     <!-- 实际上is属性的值为组件的名字 -->
  19.     <!-- 可以通过 keep-alive 保留组件的状态，避免组件的销毁和重建 -->
  20.     <keep-alive>
  21.       <component :is="currentTab"></component>
  22.     </keep-alive>
  23.   </div>
  24. </body>
  25. <script src="lib/vue.global.js"></script>
  26. <script>
  27.   const Home = {
  28.     template: `<div>
  29.         首页 <input />
  30.       </div>`
  31.   }
  32.   const Kind = {
  33.     template: `<div>
  34.         分类 <input />
  35.       </div>`
  36.   }
  37.   const Cart = {
  38.     template: `<div>
  39.         购物车 <input />
  40.       </div>`
  41.   }
  42.  
  43.   Vue.createApp({
  44.     components: { Home, Kind, Cart },
  45.     data () {
  46.       return {
  47.         currentTab: 'Home'
  48.       }
  49.     }
  50.   }).mount('#app')
  51. </script>
  52. </html></span></span>

当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 <KeepAlive> 的直接子节点及其所有子孙节点。

3.14.3 activated、deactivated钩子

完整案例：53_activated_deacvidated.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>53_keep-alive钩子函数</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <ul>
  12.       <li @click="currentTab='Home'">首页</li>
  13.       <li @click="currentTab='Kind'">分类</li>
  14.       <li @click="currentTab='Cart'">购物车</li>
  15.     </ul>
  16.  
  17.     <!-- 动态组件 -->
  18.     <!-- 实际上is属性的值为组件的名字 -->
  19.     <!-- 可以通过 keep-alive 保留组件的状态，避免组件的销毁和重建 -->
  20.     <keep-alive>
  21.       <component :is="currentTab"></component>
  22.     </keep-alive>
  23.   </div>
  24. </body>
  25. <script src="lib/vue.global.js"></script>
  26. <script>
  27.   // 假设首页面需要保留组件的状态，跳转到新的页面再回到首页时，要确保数据的请求的及时性时效性
  28.   // 以前 mounted 中请求了数据，使用keepalive时再回到首页 mounted 并没有执行
  29.   // 如果要获取最新的数据，请在activated中获取
  30.  
  31.   // 假设首页长列表，点击某一项可以进入详情，返回首页之后，还希望滚动条在原来的位置
  32.   // 以前销毁组件时记录滚动条位置，是应用keep-alive之后，在deacvidated中记录滚动条位置
  33.   const Home = {
  34.     template: `<div>
  35.         首页 <input />
  36.       </div>`,
  37.       created () {
  38.         console.log('首页 created')
  39.       },
  40.       mounted () {
  41.         console.log('首页 mounted')
  42.       },
  43.       unmounted () {
  44.         console.log('首页 unmounted')
  45.       },
  46.       activated () {
  47.         console.log('首页 activated')
  48.       },
  49.       deactivated () {
  50.         console.log('首页 deactivated')
  51.       }
  52.   }
  53.   const Kind = {
  54.     template: `<div>
  55.         分类 <input />
  56.       </div>`,
  57.       created () {
  58.         console.log('分类 created')
  59.       },
  60.       mounted () {
  61.         console.log('分类 mounted')
  62.       },
  63.       unmounted () {
  64.         console.log('分类 unmounted')
  65.       },
  66.       activated () {
  67.         console.log('分类 activated')
  68.       },
  69.       deactivated () {
  70.         console.log('分类 deactivated')
  71.       }
  72.   }
  73.   const Cart = {
  74.     template: `<div>
  75.         购物车 <input />
  76.       </div>`,
  77.       created () {
  78.         console.log('购物车 created')
  79.       },
  80.       mounted () {
  81.         console.log('购物车 mounted')
  82.       },
  83.       unmounted () {
  84.         console.log('购物车 unmounted')
  85.       },
  86.       activated () {
  87.         console.log('购物车 activated')
  88.       },
  89.       deactivated () {
  90.         console.log('购物车 deactivated')
  91.       }
  92.   }
  93.  
  94.   Vue.createApp({
  95.     components: { Home, Kind, Cart },
  96.     data () {
  97.       return {
  98.         currentTab: 'Home'
  99.       }
  100.     }
  101.   }).mount('#app')
  102. </script>
  103. </html></span></span>

要不不缓存，要缓存都缓存了，这样不好

使用 include / exclude可以设置哪些组件被缓存，使用 max可以设定最多缓存多少个

  1. <span style="background-color:#f8f8f8"><!-- 用逗号分隔的字符串 -->
  2. <KeepAlive include="a,b">
  3. 	<component :is="view"></component>
  4. </KeepAlive>
  5.  
  6. <!-- 正则表达式 (使用 `v-bind`) -->
  7. <KeepAlive :include="/a|b/">
  8. 	<component :is="view"></component>
  9. </KeepAlive>
  10.  
  11. <!-- 数组 (使用 `v-bind`) -->
  12. <KeepAlive :include="['a', 'b']">
  13. 	<component :is="view"></component>
  14. </KeepAlive></span>

组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

完整案例：54_keep_alive_include.html

  1. <span style="background-color:#f8f8f8"><!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>54_选择性缓存</title>
  9. </head>
  10.  
  11. <body>
  12.   <div id="app">
  13.     <ul>
  14.       <li @click="currentTab='Home'">首页</li>
  15.       <li @click="currentTab='Kind'">分类</li>
  16.     <li @click="currentTab='Cart'">购物车</li>
  17.   </ul>
  18.  
  19. <!-- 动态组件 -->
  20.  <!-- 实际上is属性的值为组件的名字 -->
  21.   <!-- 可以通过 keep-alive 保留组件的状态，避免组件的销毁和重建 -->
  22.  
  23. <!-- 用逗号分隔的字符串 注意不要加空格 -->
  24.   <!-- <keep-alive include="home,kind"> -->
  25.  
  26. <!-- 正则表达式 (使用 `v-bind`) 使用绑定属性 -->
  27.   <!-- <keep-alive :include="/home|kind/"> -->
  28.  
  29.   <!-- 数组 (使用 `v-bind`) -->
  30.   <keep-alive :include="['home', 'kind']">
  31.    <component :is="currentTab"></component>
  32.  </keep-alive>
  33. </div>
  34. </body>
  35. <script src="lib/vue.global.js"></script>
  36. <script>
  37. // 假设首页面需要保留组件的状态，跳转到新的页面再回到首页时，要确保数据的请求的及时性时效性
  38. // 以前 mounted 中请求了数据，使用keepalive时再回到首页 mounted 并没有执行
  39. // 如果要获取最新的数据，请在activated中获取
  40.  
  41. // 假设首页长列表，点击某一项可以进入详情，返回首页之后，还希望滚动条在原来的位置
  42. // 以前销毁组件时记录滚动条位置，是应用keep-alive之后，在deacvidated中记录滚动条位置
  43. const Home = {
  44.     name: 'home',
  45.     template: `<div>
  46.       首页 <input />
  47.     </div>`,
  48.     created() {
  49.       console.log('首页 created')
  50.     },
  51.     mounted() {
  52.       console.log('首页 mounted')
  53.     },
  54.     unmounted() {
  55.       console.log('首页 unmounted')
  56.     },
  57.     activated() {
  58.       console.log('首页 activated')
  59.     },
  60.     deactivated() {
  61.    console.log('首页 deactivated')
  62.  }
  63. }
  64. const Kind = {
  65.     name: 'kind',
  66.     template: `<div>
  67.       分类 <input />
  68.     </div>`,
  69.     created() {
  70.       console.log('分类 created')
  71.     },
  72.     mounted() {
  73.       console.log('分类 mounted')
  74.     },
  75.     unmounted() {
  76.       console.log('分类 unmounted')
  77.     },
  78.     activated() {
  79.       console.log('分类 activated')
  80.     },
  81.     deactivated() {
  82.    console.log('分类 deactivated')
  83.  }
  84. }
  85. const Cart = {
  86.     name: 'cart',
  87.     template: `<div>
  88.       购物车 <input />
  89.     </div>`,
  90.     created() {
  91.       console.log('购物车 created')
  92.     },
  93.     mounted() {
  94.       console.log('购物车 mounted')
  95.     },
  96.     unmounted() {
  97.       console.log('购物车 unmounted')
  98.     },
  99.     activated() {
  100.       console.log('购物车 activated')
  101.     },
  102.     deactivated() {
  103.    console.log('购物车 deactivated')
  104.  }
  105. }
  106.  
  107.   Vue.createApp({
  108.     components: { Home, Kind, Cart },
  109.     data() {
  110.       return {
  111.       currentTab: 'Home'
  112.     }
  113.     }
  114.   }).mount('#app')
  115. </script>
  116. </html></span>

最大缓存实例数

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><KeepAlive :max="10">
  2.   <component :is="activeComponent" />
  3. </KeepAlive></span></span>

3.15 <component>元素

一个用于渲染动态组件或元素的“元组件”

完整案例:55_component_element.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>55_component元素</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <input type="checkbox" v-model="flag" />
  12.     <!-- 条件为真渲染为 a 标签，否则为 span 标签 -->
  13.     <component :is="flag ? 'a' : 'span'">你好</component>
  14.  
  15.     <component :is="flag ? 'my-com1' : 'my-com2'"></component>
  16.   </div>
  17. </body>
  18. <script src="lib/vue.global.js"></script>
  19. <script>
  20.   const Com1 = {
  21.     template: `<div>com1</div>`
  22.   }
  23.   const Com2 = {
  24.     template: `<div>com2</div>`
  25.   }
  26.   Vue.createApp({
  27.     components: {
  28.       MyCom1: Com1,
  29.       MyCom2: Com2
  30.     },
  31.     data () {
  32.       return {
  33.         flag: false
  34.       }
  35.     }
  36.   }).mount('#app')
  37. </script>
  38. </html></span></span>

也可以渲染组件

3.16 DOM 模板解析注意事项（is="vue:xxx"）

当 is attribute 用于原生 HTML 元素时，它将被当作 Customized built-in element，其为原生 web 平台的特性。

但是，在这种用例中，你可能需要 Vue 用其组件来替换原生元素，如 DOM 模板解析注意事项所述。你可以在 is attribute 的值中加上 vue: 前缀，这样 Vue 就会把该元素渲染为 Vue 组件(my-row-component为自定义组件)：

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><table>
  2.   <tr is="vue:my-row-component"></tr>
  3. </table></span></span>

完整案例：56_DOM模板解析注意事项.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>56_DOM模板解析注意事项</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <table>
  12.       <tr>
  13.         <td>序号</td>
  14.         <td>姓名</td>
  15.         <td>密码</td>
  16.       </tr>
  17.       <!-- <my-tr :list="list"></my-tr> -->
  18.       <!-- Vue 用其组件来替换原生元素 -->
  19.       <tr is="vue:my-tr" :list="list"></tr>
  20.     </table>
  21.   </div>
  22. </body>
  23. <template id="tr">
  24.   <tr v-for="item of list" :key="item.id">
  25.     <td>{{ item.id }}</td>
  26.     <td>{{ item.name }}</td>
  27.     <td>{{ item.password }}</td>
  28.   </tr>
  29. </template>
  30. <script src="lib/vue.global.js"></script>
  31. <script>
  32.   const Tr = {
  33.     props: ['list'],
  34.     template: '#tr'
  35.   }
  36.   Vue.createApp({
  37.     components: {
  38.       MyTr: Tr
  39.     },
  40.     data () {
  41.       return {
  42.         list: [
  43.           {
  44.             id: 1,
  45.             name: '张三',
  46.             password: '123'
  47.           },
  48.           {
  49.             id: 2,
  50.             name: '李四',
  51.             password: '234'
  52.           },
  53.           {
  54.             id: 3,
  55.             name: '王五',
  56.             password: '345'
  57.           }
  58.         ]
  59.       }
  60.     }
  61.   }).mount('#app')
  62. </script>
  63. </html></span></span>

注意不要使用绑定属性

3.17 异步组件

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能

3.17.1 全局API

学习：defineAsyncComponent()

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">import { defineAsyncComponent } from 'vue'
  2.  
  3. const AsyncComp = defineAsyncComponent(() => {
  4.   return new Promise((resolve, reject) => {
  5.     // ...从服务器获取组件
  6.     resolve(/* 获取到的组件 */)
  7.   })
  8. })
  9. // ... 像使用其他一般组件一样使用 `AsyncComp`</span></span>

完整案例：57_defineAsyncComponent.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>57_定义异步组件</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-test></my-test>
  12.     <hr/>
  13.     <my-com></my-com>
  14.   </div>
  15. </body>
  16. <template id="com">
  17.   <div>异步加载组件</div>
  18. </template>
  19. <script src="lib/vue.global.js"></script>
  20. <script>
  21.   const { createApp, defineAsyncComponent } = Vue
  22.   const Com = {
  23.     template: '#com'
  24.   }
  25.   const MyCom = defineAsyncComponent(() => {
  26.     return new Promise((resolve, reject) => {
  27.       setTimeout(() => {
  28.         resolve(Com)
  29.       }, 3000)
  30.     })
  31.   })
  32.  
  33.   createApp({
  34.     components: {
  35.       MyCom,
  36.       MyTest: Com
  37.     }
  38.   }).mount('#app')
  39. </script>
  40. </html></span></span>

3.17.2 加载函数

学习：() => import()

ES 模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件

  1. <span style="background-color:#f8f8f8"><span style="color:#333333">import { defineAsyncComponent } from 'vue'
  2.  
  3. const AsyncComp = defineAsyncComponent(() =>
  4.   import('./components/MyComponent.vue')
  5. )</span></span>

以后讲解项目时可以用到，需要在脚手架环境中使用（单文件组件中使用）

3.18.3 <Suspense>组件

<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

vue3中新增的

完整案例：58_Suspense.html

  1. <span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>58_Suspense</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <my-test></my-test>
  12.     <hr/>
  13.     <!-- Suspense内部需要一个根组件 -->
  14.     <Suspense>
  15.       <!-- 异步加载组件 -->
  16.       <my-com></my-com>
  17.  
  18.       <!-- 加载状态 -->
  19.       <template #fallback>
  20.         加载中...
  21.       </template>
  22.     </Suspense>
  23.   </div>
  24. </body>
  25. <template id="com">
  26.   <div>异步加载组件</div>
  27. </template>
  28. <script src="lib/vue.global.js"></script>
  29. <script>
  30.   const { createApp, defineAsyncComponent } = Vue
  31.   const Com = {
  32.     template: '#com'
  33.   }
  34.   const MyCom = defineAsyncComponent(() => {
  35.     return new Promise((resolve, reject) => {
  36.       setTimeout(() => {
  37.         resolve(Com)
  38.       }, 3000)
  39.     })
  40.   })
  41.  
  42.   createApp({
  43.     components: {
  44.       MyCom,
  45.       MyTest: Com
  46.     }
  47.   }).mount('#app')
  48. </script>
  49. </html></span></span>

后期可以和 Transition,KeepAlive,路由等结合使用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/69851
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号