vue 组件

大家好，我是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均是从真实项目中提炼出来的技能点，

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

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

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