最后更多分享：前端字节跳动真题解析
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
效果：
props验证
我们定义一个子组件，并接收复杂数据：
…
Vue.component(“counter”,{
//子组件模板有且只有一个根标签
template: “<button @click=‘num1++,num2++’>{{num1}}+{{num2}}={{num1+num2}}”,
props: {
num1: {
type: Number,
default: 0
},
num2: {
type: Number,
default: 0
}
}
})
const app= new Vue({
el:“#app”,
data: {
num1: 1,
num2: 2
}
})
子组件可以对 items 进行迭代，并输出到页面。 props：定义需要从父组件中接收的属性
-
items：是要接收的属性名称
-
type：限定父组件传递来的必须是数组
-
default：默认值
-
required：是否必须
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告，但还是会执行
运行效果：
type类型，可以有：
子向父的通信：$emit
子组件接收到父组件属性后，默认是不允许修改的。既然只有父组件能修改，那么加和减的操作一定是放在父组件：
const app= new Vue({
el:“#app”,
data: {
num: 0
},
methods:{
incr(){
this.num++;
}
}
})
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
我们可以通过v-on指令将父组件的函数绑定到子组件上：
<counter :num1=“num” @incr1=“incr()”>
<counter :num1=“num” @incr1=“incr()”>
<counter :num1=“num” @incr1=“incr()”>
在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：
Vue.component(“counter”,{
template: “<button @click=‘subIncr’>点我呀，点我加1。{{num1}}”,
props: {
num1: {
type: Number,
default: 0
}
},
methods:{
subIncr(){
this.$emit(“incr1”)
}
}
})
vue提供了一个内置的 this.$emit() 函数，用来调用父组件绑定的函数
效果：
=========================================================================
实现功能：一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换
编写登录及注册组件
新建一个user目录以及login.js及register.js，编写组件，这里我们只写模板，不写功能。
login.js内容如下：
const loginForm = {
template:'\
登录页
\用户名：
\
密码：
\
’
}
register.js内容：
const registerForm = {
template:'\
注册页
\用 户 名：
\
密 码：
\
确认密码：
\
’
}
编写父组件并引用子组件
登录
注册
注册页/登录页
样式：
使用vue-router模块实现路由功能
vue-router简介和安装
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网：https://router.vuejs.org/zh-cn/
使用npm安装：npm install vue-router --save
在index.html中引入依赖：
快速入门：
新建vue-router对象，并且指定路由规则：
// 创建VueRouter对象，并指定路由参数
const router = new VueRouter({
routes:[ // 编写路由规则
{
path:“/login”, // 请求路径，以“/”开头
component:loginForm // 组件名称
},
{
path:“/register”,
component:registerForm
}
]
})
-
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
-
path：路由的路径
-
component：组件名称
在父组件中引入router对象：
var vm = new Vue({
el:“#app”,
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router // 引用上面定义的router对象
})
页面跳转控制：
登录
注册
- 通过
<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
读者福利
========
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
img.cn/20201126205036657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
