vue 组件

最新推荐文章于 2025-11-07 11:48:56 发布

原创最新推荐文章于 2025-11-07 11:48:56 发布 · 598 阅读

0 ·

CC 4.0 BY-SA版权

大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS-12任务中可能会使用到的知识点：

1.背景介绍

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.知识剖析

一.什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

3 常见问题

注册组件:全局注册

Vue.component('my-component-name', {
// ... 选项 ...
})

注册组件:局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

基础组件的自动化全局注册

可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表：

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}

这里介绍一个可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的代码

通过 PROP 向子组件传递数据
Prop 验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

props: {
// 基础的类型检查 (`null` 匹配任何类型)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
}

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

如果 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

自定义事件

通过prop属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的。

父组件使用时 @updateParmas="updateVideo"
子组件内 this.$emit('updateParmas', 这是我暴露出去的数据)

子组件通知父组件执行updateParmas函数

.sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

所以官方推荐以 update:my-prop-name 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

<text-document v-bind:title.sync="title"></text-document>
this.$emit('update:title', newTitle)

slot插槽

slot相当于子组件设置了一个地方，如果在调用它的时候，往它的开闭标签之间放了东西，那么它就把这些东西放到slot中。

<my-component>
<p>这是一些初始内容</p>
</my-component>

4 解决方案

5.编码实战

子组件通知父子更新的两种方法

this.$emit('updateParmas','暴露一个值')// 不加.sync修饰符直接给父组件传事件，在父组件中修改props

this.$emit('update:test', newValue )// 可以加上.sync修饰符在子组件内修改props

PPT

https://it-xzy.github.io/WEB-NEW/2018.7.27D-JS12.html

视频

https://v.qq.com/x/page/n0737skprys.html

6.扩展思考

7.参考文献

鸣谢

感谢大家观看

制作人：高昕

8 更多讨论

1.vue cli 3.x版本的配置文件在哪里？

项目会生成一个叫vue.config.js的文件夹，就在这个里面配置东西。

2.vue cli 3.x版本的配置具体都是什么？

outputDir: undefined,
assetsDir: undefined,
runtimeCompiler: true,
productionSourceMap: false,
parallel: undefined,
css: undefined,
lintOnSave: undefined,
baseUrl: './'

附上官方文档

https://github.com/vuejs/vue-cli/tree/dev/docs/config

3.vue cli 3.x版本如何配置跨域？

devServer: {
  // proxy: 'http://47.98.143.242:8083', // 配置跨域处理,只有一个代理
  proxy: {
    '/goddess-app-ajax': {
      target: 'http://47.98.143.242:8083',
      changeOrigin: true,
      pathRewrite: {
        '^/goddess-app-ajax': ''
      }
    }
  }
},

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台。

每个职业以15个左右的task为初学者提供更快速高效的学习方式；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！

点击官网注册官网，使用师兄邀请链接有优惠。