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.基础的类型检查 (null 和 undefined 会通过任何类型验证)
num:Number
2.多个可能的类型
num:[Number,String]
- 必传验证
1.必填的字符串
num:{ type:Number, required:true }
- 默认值设置
- 带有默认值的数字
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来接收父组件传递的某个数据,该属性就会出现在子组件模板的最外层节点上面
每一个组件或者实例都会有自定义事件,和触发事件的能力
父组件给子组件绑定一个自定义事件,这个事件的处理程序却是父组件的一个方法
<son @change="父组件的函数"></son>
当子组件触发这个事件的时候,相当于父组件的方法被执行了 this.$emit(自定义事件,参数)
v-model可以用在组件通信中
在组件上面使用v-model指令,相当于绑定了value属性与监听input事件。
<child :value="myText" @input="handleEvent">
=====================================================================
组件、实例对象上有这样的属性:$parent,$children,$root,
$parent父组件$children[子组件索引]子组件
这样的话,就形成了viewmodel链(关系链),
理论上来说,任何两个组件之间的数据都 可以互相调用,获取
缺点:使用杂乱,复杂
例如 this.$root.$children[3].$children[4]....
- 兄弟组件之间的通信
=======================================================================
在兄弟组件之间的通信,可以采用关系链和ref链去使用,解决兄弟之间通信问题。
给子组件添加ref属性<little-brother ref="little"></little-brother>
然后改变数据this.$parent.$refs.little.crying=true
==================================================================
var bus = new Vue()
在mounted生命周期中进行监听
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。