【Vue3】官网项目･Vue Mastery Sock-5（组件化&参数）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

这篇主要是将原先的代码进行了组件化的重构，顺便多添加了一个参数（Shipping）以介绍如何向组件内传递参数。

组件（Components）：封装的可重用代码

参数（Props）：向组建内部传递的数据

组件化

实现目标

封装📦重用代码，项目组件化

项目组件化

实现步骤

1. 新建组件文件夹（components）和📄组件文件（components/ProductDisplay.js和components/ProductDetails.js）

2. 将index.html中与产品相关的代码剪切到ProductDisplay.js中

注意⚠️代码前后要加"`"，mac的话就是英文输入法下的左上角那个输入波浪的按键；还有就是不加/*html*/红框框里的代码不会高亮显示哈

3. 将main.js文件中函数（除了data()中的参数cart）的剪切到ProductDisplay.js中

4. 在main.js和ProductDisplay.js中添加表示额外费用的参数以及判断产品是否需要额外参数的函数

• type：表示参数的类型

• required：表示是否必须

  props: {
    premium: {
      type: Boolean,
      required: true
    }
  }

 shipping() {
      if (this.premium) {
        return 'Free'
      }
      return 2.99
    }

5. 在index.html中引用ProductDisplay.js

   1. 在原先剪切代码处引用组件名称（就是下图引号中的那个就是名字）
   2. 在下方脚本处引用js文件（通过<script></script>）

就是下图两个地方：

6. 将ProductDisplay.js中的details剪切到ProductDetails.js中，并添加相应的参数

• type：表示参数的类型

• required：表示是否必须

7. 在ProductDisplay.js中details的剪切位置处引用ProductDetails元素

8. 在index.html中引用ProductDetails.js

稍稍总结下

其实通过上面一系列的操作可以看出ProductDisplay.js是index.html中的一个组件，而ProductDetails.js是ProductDisplay.js中的一个组件，但值得注意的是，这两个文件都是index.html中通过脚本方式引用使它们分别成为一个自定义元素标签🏷️

测试效果

当premium=true

当premium=false

搞定(｡･ω･｡)ﾉ🎉ﾉ🎉ﾉ🎉～～～