Vue2下篇

 插槽：

基本插槽：

   普通插槽：父组件向子组件传递静态内容。基本插槽只能有一个slot标签，因为这个是默认的位置，以是只能有一个

1. <!-- ParentComponent.vue -->
2. <template>
3. <ChildComponent>
4. <p>This is passed from parent</p>
5. </ChildComponent>
6. </template>
8. <!-- ChildComponent.vue -->
9. <template>
10. <div>
11. <slot></slot> <!-- 插槽位置 -->
12. </div>
13. </template>

复制代码

命名插槽：

   假如你希望在同一个子组件中传递多个内容，可以通过命名插槽来实现。命名插槽允许父组件向子组件传递差异的内容并指定插槽的位置。

1. <!-- ParentComponent.vue -->
2. <template>
3. <ChildComponent>
4. <template v-slot:header>
5. <h1>This is the header</h1>
6. </template>
7. <template v-slot:footer>
8. <p>This is the footer</p>
9. </template>
10. </ChildComponent>
11. </template>
13. <!-- ChildComponent.vue -->
14. <template>
15. <div>
16. <header><slot name="header"></slot></header> <!-- 命名插槽 -->
17. <main>Content of the child component</main>
18. <footer><slot name="footer"></slot></footer> <!-- 命名插槽 -->
19. </div>
20. </template>

复制代码

作用域插槽：

   作用域插槽（也叫做“作用域插槽”）是一种更强大的插槽功能，它让父组件可以或许通过插槽访问子组件的数据或方法。通过作用域插槽，父组件可以传递一个模板，并且可以访问子组件中的数据。

1. <!-- 父组件 -->
2. <ListComponent :items="['Apple', 'Banana', 'Cherry']">
3.   <template v-slot:default="{ item }">
4.     <li>{
5.   
6.   { item }}</li>
7.   </template>
8. </ListComponent>
10. <!-- 子组件 -->
11. <template>
12.   <ul>
13.     <slot v-for="item in items" :item="item"></slot>
14.   </ul>
15. </template>
17. <script>
18. export default {
19.   props: {
20.     items: Array,
21.   },
22. };
23. </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对象，可以传递参数到目的路由，目的路由可以根据这些参数动态地显示相应内容。
 

使用路由查询传参的方法：
1. 在 <router-link> 中使用查询参数：

1. <router-link :to="{ path: '/user', query: { id: 123, name: 'John' }}">
2. 用户信息
3. </router-link>

复制代码

:to 是 Vue 的动态绑定语法，这里绑定的是一个对象。 
2.路由出口：

显示跳转页面的对应的组件显示部门
   router-view是 Vue Router 提供的一个组件，用于显示当前路由对应的组件内容。当用户点击footer_warp中的 router-link 举行导航时，根据路由配置，对应的组件会在这里渲染。例如，假如用户点击发现音乐链接，路由会将/find路径对应的组件渲染到这个router-view中；假如点击我的音乐链接，会将/my路径对应的组件渲染到router-view中，以此类推。
  

 
使用动态数据作为 include 属性：

1. <template>
2.   <keep-alive :include="keepArr">
3.     <router-view></router-view>
4.   </keep-alive>
5. </template>
6. <script>
7. export default {
8.   data() {
9.     return {
10.       keepArr: ['HomeComponent', 'AboutComponent']
11.     };
12.   }
13. };
14. </script>

复制代码

• 在这个示例中，keepArr 是一个数组，存储了需要被缓存的组件名称。
  
• 可以动态地修改 keepArr 数组，例如通过方法添加或删除元素，来控制哪些组件被缓存。
  
• 当 router-view 中的组件名称在 keepArr 数组中时，该组件会被 keep-alive 缓存，例如当路由切换到 HomeComponent 或 AboutComponent 时，这些组件会被缓存。
  

 3.route路由参数：

1. export default {
2. name: 'UserComponent',
3. created() {
4. // 获取查询参数
5. const id = this.$route.query.id;
6. const name = this.$route.query.name;
7. console.log(id, name);
8. }
9. };

复制代码

 4.导入方式：

静态导入：

1. import User from '@/views/layout/user.vue';

复制代码

这种导入方式是静态导入，在 JavaScript 文件加载时，这些模块会被立即导入。
缺点：会增长初始加载时间和包的大小。这是因为在这种情况下，初始的包会包含全部导入的模块和组件代码，即便此中某些组件可能不会被立纵然用。
 
动态导入：

1. const Prodetail = () => import('@/views/prodetail');

复制代码

这种导入方式是动态导入，使用函数调用 import()，它返回一个 Promise，会在函数被调用时才开始导入模块。
长处：可实现懒加载，减少初始包的大小，进而提高应用的初始加载速率，适用于一些不常用的页面或组件。可以或许根据用户的利用或路由导航动态加载模块，优化性能。

1. import Vue from 'vue'
2. import VueRouter from 'vue-router'
3. // 这个效果和后面加上login/index.uve是一样的
4. import Layout from '@/views/layout'
5. import Home from '@/views/layout/home.vue'
6. import Category from '@/views/layout/category.vue'
7. import Cart from '@/views/layout/cart.vue'
8. import User from '@/views/layout/user.vue'
9. import store from '@/store'
11. const Login = () => import('@/views/login')
12. const SearchIndex = () => import('@/views/search/index.vue')
13. const Pay = () => import('@/views/pay')
14. const Prodetail = () => import('@/views/prodetail')
16. Vue.use(VueRouter)
18. const router = new VueRouter({
19.   routes: [
20.     { path: '/login', component: Login },
21.     {
22.       path: '/',
23.       // 添加重定向
24.       redirect: '/home',
25.       component: Layout,
26.       children: [
27.         { path: '/home', component: Home },
28.         { path: '/category', component: Category },
29.         { path: '/cart', component: Cart },
30.         { path: '/user', component: User }
31.       ]
32.     },
33.     { path: '/pay', component: Pay },
34.     // 动态路由传参
35.     { path: '/prodetail/:id', component: Prodetail },
36.     { path: '/searchIndex', component: SearchIndex }
38.   ]
39. })
40. export default router

复制代码

  重定向：

{ path: '/', redirect: '/home' }：当用户访问根路径 / 时，会自动重定向到 /home 路径。这里的重定向是静态的，因为重定向的目的是固定的 /home 路径，不会根据用户状态或其他条件而改变。
导航保卫：

   每次跳转页面前触发，举行一下路由处置惩罚 

1. // 所有的路由在真正被访问到之前（解析渲染对应组件前），都会先经过全局前置守卫
3. // 全局前置导航守卫
4. // to: 到哪里去，到哪里的路由信息对象（路径，参数）
5. // from: 从哪里来，从哪里来的完整路由信息对像，（路径，参数）
6. // next() 放行 放行到to要去的路径
7. // next(路径) 进行拦截，拦截到next里面配置的路径
9. // 定义一个数组，专门用户存放所有需要权限访问的页面
10. const authUrls = ['/pay', '/myorder']
11. router.beforeEach((to, from, next) => {
12.   const token = store.getters.token
14.   // 如果是非权限页面，直接放行
15.   if (!authUrls.includes(to.path)) {
16.     return next()
17.   }
19.   // 如果是权限页面
20.   if (token) {
21.     next() // 有 token 放行
22.   } else {
23.     // 无 token，跳转到登录页
24.     next('/login')
25.   }
26. })

复制代码

自定义指令：

局部自定义指令：

   directives: {...}：在组件的 directives 属性中注册自定义指令。
  'local-focus'：自定义指令的名称，使用时为 v-local-focus。

1. <template>
2.   <div>
3.     <input v-local-focus type="text" />
4.   </div>
5. </template>
7. <script>
8. export default {
9.   directives: {
10.     'local-focus': {
11.       inserted: function (el) {
12.         el.focus();
13.       }
14.     }
15.   }
16. };
17. </script>

复制代码

全局自定义指令：

   直接将指令定义在main.js文件当中

1. Vue.directive('focus', {
2.   inserted: function (el) {
3.     el.focus();
4.   }
5. });

复制代码

 带有参数的指令：

1. <!-- 使用带有普通参数的自定义指令 -->
2. <input type="text" v-color:red>
4. directives: {
5.          color: {
6.                 bind: function (el, binding) {
7.                    // 获取参数
8.                    const color = binding.arg;
9.                    el.style.color = color;
10.                   }
11.                 }
12.             }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。