当前位置：首页 > article >正文

Vue2下篇

article 2025/1/27 14:13:52

插槽：

基本插槽：

普通插槽：父组件向子组件传递静态内容。基本插槽只能有一个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对象，可以传递参数到目标路由，目标路由可以根据这些参数动态地显示相应内容。

使用路由查询传参的方法：

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中，以此类推。

使用动态数据作为 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

重定向：

{ 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;
                  }
                }
            }

查看全文

http://www.kler.cn/a/519103.html