持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
on
on监听事件
子组件 父组件
this.$emit('removeTest',index)
@removeTest="remove"
remove() {}
arguments[0]形参 vue add element
将子组件中的值传递过来赋值给父组件value
<input type="text" : value="value" @input="onInput">
props: ['value'],
methods: {
onInput(e) {
let value = e.target.value;
this.$emit('input',value)
}
}
<k-input :value="value" @input="value == arguments[0]">
vue add element集成在vue上
provide inject
provide() { return { form: this //将组件实例作为提供者,子代组件方便获取 }; },
inject: ["form"],
路由命名
routere-link to="{name: 'home',params: {userid:123}}
动态路由
{path:'/page3/:id',component:Page3}
获取传过来的值
1).this$router.params,id
2).{ path: '/page3/:id', props: true, component: Page3 }
props:['id']
命名视图 一个组件内有多个router-view怎么分配组件
{
path:'/home',
compontents:{
defalut: Home,
a: List
}
路由懒加载
{
path:'/login',
component:()=>import('./components/Login')
}
全局守卫
router.beforeEach((to, from, next ) => {
if(to.fullPath == 'shoppingCart') {
next('/login')
}
})
// beforeEnter()
//时间触发比前置钩子晚一些
router.beforeResolve((to, from, next ) => {
})
router.afterEach((to, from, next ) => {
})
路由独享的守卫
可以在路由配置上直接定义beforeEnter守卫 next()
组件内的守卫
beforeRouteEnter(to,from,next) {
},
beforeRouteUpdate(to,from,next) {
}
beforeRouteLeave(to,from,next) {
}
导航被触发
调用全局的beforeEach守卫
在重用的组件里调用beforeRouteUpdate守卫
在路由配置里调用beforeEnter
在被激活的组件里调用beforeRouteEnter
调用全局的beforeResolve(2.5+)
导航被确认
调用全局的afterEach钩子
触发DOM更新
vue请求反向代理
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000'. //代理目标
changeOrigin: true, //是否改变请求源
pathRewrite: {
'^/api': '/api'
}
}
}
}
.map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
.reduce()方法接受一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,
对空数组是不会执行回调函数的
插槽
有name的属于具名插槽,没有name属于匿名插槽
普通插槽渲染的位置是在它的父组件里面,而不是子组件里面
作用域插槽渲染是在子组件里面
作用域插槽 slot-scope
作用域插槽在解析的时候,不会作为组件的孩子节点,会解析成函数,当子组件渲染时,会调用此函数进行渲染
或者可以说成作用域插槽是子组件可以在slot标签上绑定属性值,在父组件可以拿到子组件的数据,通过子组件绑定数据传递给父组件(插槽的作用域为子组件)
