Vue2下篇
插槽：基本插槽：
普通插槽：父组件向子组件传递静态内容。基本插槽只能有一个slot标签，因为这个是默认的位置，以是只能有一个
<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<p>This is passed from parent</p>
</ChildComponent>
</template>
<!-- ChildComponent.vue -->
<template>
<div>
<slot></slot> <!-- 插槽位置 -->
</div>
</template> 命名插槽：
假如你希望在同一个子组件中传递多个内容，可以通过命名插槽来实现。命名插槽允许父组件向子组件传递差异的内容并指定插槽的位置。
<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<template v-slot:header>
<h1>This is the header</h1>
</template>
<template v-slot:footer>
<p>This is the footer</p>
</template>
</ChildComponent>
</template>
<!-- ChildComponent.vue -->
<template>
<div>
<header><slot name="header"></slot></header> <!-- 命名插槽 -->
<main>Content of the child component</main>
<footer><slot name="footer"></slot></footer> <!-- 命名插槽 -->
</div>
</template> 作用域插槽：
作用域插槽（也叫做“作用域插槽”）是一种更强大的插槽功能，它让父组件可以或许通过插槽访问子组件的数据或方法。通过作用域插槽，父组件可以传递一个模板，并且可以访问子组件中的数据。
<!-- 父组件 -->
<ListComponent :items="['Apple', 'Banana', 'Cherry']">
<template v-slot:default="{ item }">
<li>{
{ item }}</li>
</template>
</ListComponent>
<!-- 子组件 -->
<template>
<ul>
<slot v-for="item in items" :item="item"></slot>
</ul>
</template>
<script>
export default {
props: {
items: Array,
},
};
</script>
路由：
1.router-link路由跳转：
<router-link :to="/find"> </router-link> 是 Vue Router 提供的组件，它的主要功能是实现 SPA（单页应用）中的路由导航。当用户点击 <router-link> 时，它不会像普通的<a href>标签那样触发页面的完全刷新而是通过 Vue Router 的内部机制，根据路由配置更新当前页面的部门内容，实现页面的局部更新，提供了更流畅的用户体验，克制了传统多页应用中页面跳转带来的白屏和加载耽误等问题。
可以方便地传递路由参数，例如<router-link :to="{name: 'user' ,params: {userId: 123}}">通过name属性和params对象，可以传递参数到目的路由，目的路由可以根据这些参数动态地显示相应内容。
https://i-blog.csdnimg.cn/direct/64e54b3cde234da9af18482b2566bc4f.png
使用路由查询传参的方法：
1. 在 <router-link> 中使用查询参数：
<router-link :to="{ path: '/user', query: { id: 123, name: 'John' }}">
用户信息
</router-link>
:to 是 Vue 的动态绑定语法，这里绑定的是一个对象。
2.路由出口：
显示跳转页面的对应的组件显示部门
router-view是 Vue Router 提供的一个组件，用于显示当前路由对应的组件内容。当用户点击footer_warp中的 router-link 举行导航时，根据路由配置，对应的组件会在这里渲染。例如，假如用户点击发现音乐链接，路由会将/find路径对应的组件渲染到这个router-view中；假如点击我的音乐链接，会将/my路径对应的组件渲染到router-view中，以此类推。
https://i-blog.csdnimg.cn/direct/1309c3c5bb8744d8900c9e0ca39dabd0.png
使用动态数据作为 include 属性：
<template>
<keep-alive :include="keepArr">
<router-view></router-view>
</keep-alive>
</template>
<script>
export default {
data() {
return {
keepArr: ['HomeComponent', 'AboutComponent']
};
}
};
</script>
[*]在这个示例中，keepArr 是一个数组，存储了需要被缓存的组件名称。
[*]可以动态地修改 keepArr 数组，例如通过方法添加或删除元素，来控制哪些组件被缓存。
[*]当 router-view 中的组件名称在 keepArr 数组中时，该组件会被 keep-alive 缓存，例如当路由切换到 HomeComponent 或 AboutComponent 时，这些组件会被缓存。
3.route路由参数：
export default {
name: 'UserComponent',
created() {
// 获取查询参数
const id = this.$route.query.id;
const name = this.$route.query.name;
console.log(id, name);
}
}; 4.导入方式：
静态导入：
import User from '@/views/layout/user.vue';
这种导入方式是静态导入，在 JavaScript 文件加载时，这些模块会被立即导入。
缺点：会增长初始加载时间和包的大小。这是因为在这种情况下，初始的包会包含全部导入的模块和组件代码，即便此中某些组件可能不会被立纵然用。
动态导入：
const Prodetail = () => import('@/views/prodetail');
这种导入方式是动态导入，使用函数调用 import()，它返回一个 Promise，会在函数被调用时才开始导入模块。
长处：可实现懒加载，减少初始包的大小，进而提高应用的初始加载速率，适用于一些不常用的页面或组件。可以或许根据用户的利用或路由导航动态加载模块，优化性能。
import Vue from 'vue'
import VueRouter from 'vue-router'
// 这个效果和后面加上login/index.uve是一样的
import Layout from '@/views/layout'
import Home from '@/views/layout/home.vue'
import Category from '@/views/layout/category.vue'
import Cart from '@/views/layout/cart.vue'
import User from '@/views/layout/user.vue'
import store from '@/store'
const Login = () => import('@/views/login')
const SearchIndex = () => import('@/views/search/index.vue')
const Pay = () => import('@/views/pay')
const Prodetail = () => import('@/views/prodetail')
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{
path: '/',
// 添加重定向
redirect: '/home',
component: Layout,
children: [
{ path: '/home', component: Home },
{ path: '/category', component: Category },
{ path: '/cart', component: Cart },
{ path: '/user', component: User }
]
},
{ path: '/pay', component: Pay },
// 动态路由传参
{ path: '/prodetail/:id', component: Prodetail },
{ path: '/searchIndex', component: SearchIndex }
]
})
export default router
重定向：
https://i-blog.csdnimg.cn/direct/18f53c158049491e9156ea13a283c82b.png
{ path: '/', redirect: '/home' }：当用户访问根路径 / 时，会自动重定向到 /home 路径。这里的重定向是静态的，因为重定向的目的是固定的 /home 路径，不会根据用户状态或其他条件而改变。
导航保卫：
每次跳转页面前触发，举行一下路由处置惩罚
// 所有的路由在真正被访问到之前（解析渲染对应组件前），都会先经过全局前置守卫
// 全局前置导航守卫
// to: 到哪里去，到哪里的路由信息对象（路径，参数）
// from: 从哪里来，从哪里来的完整路由信息对像，（路径，参数）
// next() 放行 放行到to要去的路径
// next(路径) 进行拦截，拦截到next里面配置的路径
// 定义一个数组，专门用户存放所有需要权限访问的页面
const authUrls = ['/pay', '/myorder']
router.beforeEach((to, from, next) => {
const token = store.getters.token
// 如果是非权限页面，直接放行
if (!authUrls.includes(to.path)) {
return next()
}
// 如果是权限页面
if (token) {
next() // 有 token 放行
} else {
// 无 token，跳转到登录页
next('/login')
}
})
自定义指令：
局部自定义指令：
directives: {...}：在组件的 directives 属性中注册自定义指令。
'local-focus'：自定义指令的名称，使用时为 v-local-focus。
<template>
<div>
<input v-local-focus type="text" />
</div>
</template>
<script>
export default {
directives: {
'local-focus': {
inserted: function (el) {
el.focus();
}
}
}
};
</script> 全局自定义指令：
直接将指令定义在main.js文件当中Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
}); 带有参数的指令：
<!-- 使用带有普通参数的自定义指令 -->
<input type="text" v-color:red>
directives: {
color: {
bind: function (el, binding) {
// 获取参数
const color = binding.arg;
el.style.color = color;
}
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]