2021-11-08 组件与路由

组件

组件把一个页面拆成多个细小的小功能区域 分别来创建

就可以让这一个个的小模块方便重复的进行调用 减少了代码量 降低了后期维护的难度

组件分类

全局组件--component

局部组件--components

创建组件其实就是新建一个.vue文件 并且写入如下内容

<template>
  <div>
      我是一个组件么么哒
  </div>
</template>
​
<script>
export default {
​
}
</script>
​
<style>
​
</style>

使用组件

在你想使用的地方

引用

// 1.引用
import Demo from "./components/demo.vue"

调用

components 用来描述局部组件 写在与data methods watch等同级的位置

语法:

components:{
    给你引用的组件起个名字: 你引用的组件
}
 components:{
    Demo
  }

使用:

组件的本质 就是自定义标签

标签有单标签和双标签 单标签 <关键字/> 双标签 <关键字></关键字>

<你的组件名/>

scoped

当前样式仅对当前组件生效

父子组件

其实就是在一个组件中引用另外一个组件

引用

调用

使用

组件传值

我在父组件中有个数据 我能在子组件中直接使用吗? 不能

我在子组件中有个数据 我能在父组件中直接使用吗? 不能

结论

组件与组件之间是完全独立的个体 无论组件是什么关系都不能直接相互使用数据

正向传值--props

父组件把数据给子组件使用

1.子组件需要使用props来创建接收传递过来数据的变量

语法:

props:[变量1,变量2,....变量n]

<template>
  <div>
      {{xiaoming}}  
       <!-- 变量的使用 -->
  </div>
</template>
​
<script>
export default {
    props:["xiaoming"] 
     //使用props来创建接收传递过来数据的变量
​
}
</script>
​

2.父组件就要给他传递数据

在子组件被调用的时候 把子组件的props当做一个属性来进行传值 (组件的实质就是自定义标签)

<template>
  <div class="bottombar">
      <!-- 使用 -->
      <Zi xiaoming="数据1"/>
      <Zi xiaoming="数据2"/>
      <Zi xiaoming="数据3"/>
      <Zi xiaoming="数据4"/>    
  </div>
</template>

props验证

就是在现有的正向传值之上 对父组件传递给子组件的数据进行数据格式或者类型上的验证

1.子组件接收的时候需要设置接收数据的验证

props:{

你接收数据的变量:数据类型

你接收数据的变量:[数据类型1,数据类型2]

你接收数据的变量:{

type:你要验证的数据类型,

default:默认值

}

}

 props:{
        //text:String 只验证一种类型
        text:[String,Number]
    }

默认值语法

 props:{
        //text:String 只验证一种类型
        // text:[String,Number]
        text:{
            type:String,
            // 默认值
            default:"你好我是默认值"
        }
    }

逆向传值

子组件把数据给父组件

逆向传值默认是不被允许的 如果想逆向传值的话那么我们必须要通过 自定义事件 来完成

逆向传值 必须要通过一个事件来触发自定义事件的创建

实现：

1.在子组件中必须要用一个事件来触发

<template>
  <div>
      zizzizizizizizi
      <button v-on:click="fun()">点我进行逆向传值</button>
  </div>
</template>
​
<script>
export default {
    methods:{
        fun(){
            
        }
    }
}
</script>
​
<style>
​
</style>

2.自定义事件 使用this.$emit() 来实现自定义事件

语法:this.$emit("自定义事件名","数据")

<template>
  <div>
      zizzizizizizizi
      <button v-on:click="fun()">点我进行逆向传值</button>
  </div>
</template>
​
<script>
export default {
    methods:{
        fun(){
            // 创建自定义事件
            this.$emit("xiaoming","我是子组件的数据^_*!")
        }
    }
}
</script>
​
<style>
​
</style>

3.父组件接收这个自定义事件

<template>
  <div>
      fufuffufufufufufufu
      <!-- 父组件函数不加()
      父组件函数不加()
      父组件函数不加()
      父组件函数不加()
      父组件函数不加() 
      因为加了函数就自动调用了
      -->
      <Nz @xiaoming="demo"/>
  </div>
</template>
​
<script>
import Nz from "./nizi.vue"
export default {
    methods:{
        // 这个形参就是子组件传递的数据会自动传给形参
        demo(val){
            console.log(val);
        }
    },
    components:{
        Nz
    }
}
</script>
​
<style>
    div{
        font-size: 0.2rem;
    }
</style>

逆向传值默认不被允许 所以我们通过事件触发一个自定义事件的抛出 在父组件中使用@ 绑定这个自定义事件 从而得到子组件的数据

兄弟同胞传值

相同父组件的两个子组件之间相互传值

跨组件传值

组件与组件之间有多个层级关系的时候传值

slot--槽口/插槽

引子

组件在被调用的时候 我们知道组件的本质是自定义标签 标签是可以在内部插内容的 组件可以吗？

默认情况下不可以

槽口是什么?

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

基础用法

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

语法:

<slot></slot>

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

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

具名槽口

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

语法：

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

在插入内容的时候：

<组件>

<p slot="你要插入的slot的name"></p>

</组件>

子组件

<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>

路由---router

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

1.新建很多的html文件

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

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

路由基本概念

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

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

路由基本创建

vue-cl自动创建

在创建脚手架的时候 选择自定义 再选择Router 即可

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

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

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

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

1.删除components里面的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>

声明式导航选中样式类

每当我们选中那个声明式导航之后 vue会自动给这个导航添加一个router-link-active的类名 那么我们就可以根据这个动态的类名添加样式

js的方式--- 编程式导航

1.跳转 this.$router.push("/去哪里的路径")

2.替换 this.$router.replace("/替换的路径")

fun(){
            this.$router.push("/home")
        }

3.前进与后退 this.$router.go() 正数 前进 负数 后退

我去公司之后项目怎么启动?

文件夹里有package.json文件,里面的name就是文件名,里面的serve改成start,项目直接启动,就可以不用npm run serve (server是匹配的,有的公司会改名字)