Vue组件通信方法大全,教你如何增加拿到BAT大厂offer几率

20 阅读4分钟

Vue.component("father", {

template: "#father",

data: function () {

return {

pMsg: {msg:"hello"}

}

},

components: {

son: {

template: "#son",

props: ["pMsg"] //接收父组件传递过来的参数 参数名字可以任意

}

}

})

new Vue({

el: "#app"

})

在这里插入图片描述

prpos验证

我们可以为组件的 prop 指定验证规则。

如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用

props:{ num:填写验证规则, }

  • 验证主要分为:

  • 类型验证

1.基础的类型检查 (nullundefined 会通过任何类型验证)

num:Number

2.多个可能的类型

num:[Number,String]

  • 必传验证

1.必填的字符串

num:{ type:Number, required:true }

  • 默认值设置
  1. 带有默认值的数字

num: { type: Number, default: 1000, }

2…带有默认值的对象, 对象或数组默认值必须从一个工厂函数获取

num: { type: Object, default: function () { return { message: 'hello' } } }

  • 自定义验证

1.自定义验证函数, 这个值必须匹配下列字符串中的一个

num: { validator(value){ return ['success', 'warning', 'danger'].indexOf(value) !== -1 }

props的值可以是对象,在里面可以对父组件传过来的数据做出验证,如果验证失败,会抛出警告

如果子组件没有通过props来接收父组件传递的某个数据,该属性就会出现在子组件模板的最外层节点上面

events up(子传父)


每一个组件或者实例都会有自定义事件,和触发事件的能力

父组件给子组件绑定一个自定义事件,这个事件的处理程序却是父组件的一个方法

<son @change="父组件的函数"></son>

当子组件触发这个事件的时候,相当于父组件的方法被执行了 this.$emit(自定义事件,参数)

在这里插入图片描述

v-model可以用在组件通信中

在组件上面使用v-model指令,相当于绑定了value属性与监听input事件。

<child :value="myText" @input="handleEvent">

在这里插入图片描述

viewmodel链

=====================================================================

组件、实例对象上有这样的属性:$parent,$children,$root,

$parent父组件$children[子组件索引]子组件

这样的话,就形成了viewmodel链(关系链)

理论上来说,任何两个组件之间的数据都 可以互相调用,获取

缺点:使用杂乱,复杂

例如 this.$root.$children[3].$children[4]....

  • 兄弟组件之间的通信


在这里插入图片描述

ref链(兄弟之间通信)

=======================================================================

在兄弟组件之间的通信,可以采用关系链和ref链去使用,解决兄弟之间通信问题。

给子组件添加ref属性<little-brother ref="little"></little-brother>

然后改变数据this.$parent.$refs.little.crying=true


在这里插入图片描述

事件总线bus

==================================================================

var bus = new Vue()

mounted生命周期中进行监听

在这里插入图片描述


在这里插入图片描述

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。

开源分享:docs.qq.com/doc/DSmRnRG…