day03-06

最新推荐文章于 2024-11-07 13:38:59 发布

serendipitymm

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量69

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/serendipitymm/article/details/121201515

版权

本文深入探讨了Vue.js中的组件槽口，解释了其作为增强组件复用性的方式，特别是如何通过默认槽口和具名槽口实现父组件与子组件间的DOM插入。接着，介绍了路由的基本概念，包括在单页面应用（SPA）中如何根据URL切换不同组件，展示了手动创建和自动创建路由的步骤，并提供了路由导航的声明式和编程式方法。最后，讨论了路由的基本配置和实际应用。

摘要由CSDN通过智能技术生成

槽口

槽口是什么？

用来混合父组件与子组件自己的模板（就是可以在组件被调用的时候向其内部插入新的dom节点）槽口也是组件提高复用的技术之一 props如果是只能向组件内部插入数据的话那么槽口就是可以向组件内部插入新的dom节点

基础用法

默认情况在组建是一个自定义标签，但是在组件被调用得到时候不能直接插入dom节点，所以在这个时候需要给组件内部设置一个插槽来接受外部插入的数据

语法

<div>
zizizizizziizziz
<slot></slot>
</div>

上面这种写法后期插入的内容多个就不好维护了所以在开发的时候使用的很少

具名槽口

带有名字的槽口给槽口在定义的时候起个名字

语法：

在定义的时候 <slot name="给槽口起个名字随便写"></slot>

在插入内容的时候：

<组件>

子组件

<template>
  <div>
      zizizizizziizziz
      <div class="red">
           <slot name="xiaoming"></slot>
      </div>
      
       <hr>
       <div class="yellow">
            <slot name="xiaohong"></slot>
       </div>
      
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .red>h1{
        color:red;
    }
    .yellow>h1{
        color:yellow;
    }
</style>

父组件

<template>
  <div>
      fufufufuffufufu
      <Sz>
          <h1 slot="xiaohong">插入内容1</h1>
          <h1>插入内容2</h1>
          <h1>插入内容3</h1>
          <h1>插入内容4</h1>
          <h1 slot="xiaoming">插入内容5</h1>
          <h1>插入内容6</h1>
          <h1>插入内容7</h1>
          <h1>插入内容8</h1>
          <h1 slot="xiaoming">插入内容9</h1>
          <h1>插入内容0</h1>
      </Sz>
    
  </div>
</template>

<script>
import Sz from "./slotzi.vue"
export default {
    components:{
        Sz
    }
}
</script>

<style>

</style>

路由

传统的项目怎样切换跳转页面

1.新建很多的html文件

2.使用标签的方式进行跳转（a标签）或者使用js的方式进行跳转（window.location。href）

传统的项目称之为多页面项目

路由基本概念

根据url的不同来渲染不同的组件页面

SPA --- 单页面应用在用户切换页面的时候没有那种传统页面的白屏问题提高了用户的体验

路由基本创建

vue-cl自动创建

在创建脚手架的时候选择自定义，再选择router空格选中，一路回车即可

在创建完项目之后会在src中多了两个文件夹

router ---》当前文件夹就是配置路由的文件夹

views ---》当前文件夹就是来写路由页面组件的

带有路由的空项目怎么办?

1.删除compontents里面的helloword.vue 与views里面的home.vue about.vue文件

2.views下创建你所需要的组件页面

3.需要配置路由规则去router下的index.js中配置

3.1引用你所想要的页面到index.js下 import from

3.2在index.js的数组对象中进行规则的配置

// 引用vue
import Vue from 'vue'
// 引用vue的路由功能模块
import VueRouter from 'vue-router'
// 引用你要配置的路由页面
// @ 只要在路径中出现  无论是在那个层级  只要写@就指向src
import Home from "@/views/home.vue"
import Jingxi from "@/views/jingxi.vue"
import Phone from "@/views/phone.vue"
import Shop from "@/views/shop.vue"
import User from "@/views/user.vue"
// 在vue中 使用  vue路由
Vue.use(VueRouter)

// 配置路由规则的地方
const routes = [
  // 配置路由规则
  {
    path: '/home', //url的路径
    name: 'home',//给这个规则起个名字
    component: Home //根据上后面的path路径 所渲染的组件页面
  },
  {
    path: '/jingxi', //url的路径
    name: 'jingxi',//给这个规则起个名字
    component: Jingxi //根据上后面的path路径 所渲染的组件页面
  },
  {
    path: '/phone', //url的路径
    name: 'phone',//给这个规则起个名字
    component: Phone //根据上后面的path路径 所渲染的组件页面
  },
  {
    path: '/user', //url的路径
    name: 'user',//给这个规则起个名字
    component: User //根据上后面的path路径 所渲染的组件页面
  },
  {
    path: '/shop', //url的路径
    name: 'shop',//给这个规则起个名字
    component: Shop //根据上后面的path路径 所渲染的组件页面
  },
 
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

手动创建

路由导航

标签方式---声明式导航

使用router-link这个标签来完成也免得跳转其中有个to属性就是你要去哪里的路径

<template>
<div class="bar">

<router-link to="/home">首页 </router-link>
<router-link to="/jingxi">惊喜 </router-link>
<router-link to="/phone">手机 </router-link>
<router-link to="/shop">购物 </router-link>
<router-link to="/user">我的 </router-link>
</div>
</template>