[vue3进阶] 4.slot插槽1——基本用法和默认值

Posted 2023-04-06

参考技术A 关于slot插槽的内容比较多，我们一点一点来学习，为了更好的理解slot的作用，我们一边写一个实例，一边来学习。
现在我们要开发一个标题栏组件，在开发中，我们经常会自己做一个标题栏，用来显示页面标题

我们先来写titleBar这个组件的基本结构，现在它显示的标题是固定的，

在App.vue中使用它

现在我们的标题栏组件显示出来了，但是它显示固定内容，显然是不行的，我们需要把显示的标题变为动态，小伙伴们肯定想到了可以用之前学过的porps，从父组件向子组件传递数据的方式实现，
这节课我们要用slot这种方式，
修改titleBar文件的内容，增加<slot></slot>标签

slot中文翻译为插槽，我们可以理解为<slot></slot>标签在这里是一个槽，占了一个位置，等待父组件的内容插入进来
那我们来修改一下父组件的内容

我们看到父组件把内容插入进来的方式是在标签里写上内容，跟原生标签插入内容的方式是一样的

我们看一下最后渲染出来的html的内容

我们看到<title-bar></title-bar>标签里的内容放到里<slot></slot>标签所占的位置

使用slot比使用props更强大的特点有一点就是slot可以直接插入html，比如

渲染html的结果

我们看到span标签占据了原来slot的位置
显示效果：

这就是slot最基本的用法了，简单来说就是在子组件中留个位置，在父组件中，写在标签内部的内容就会传递过来，占上空位。

我们titleBar这个组件在不用页面使用的时候，只要在标签里面写上相应的页面名称就行了

在使用titleBar时，内容并没有给它传递内容

这时当然就不显示内容了

如果你需要在插槽没有插入内容时，显示默认值，那就需要把默认值写在slot标签里面，
我们来修改titleBar的内容

这样，就可以显示一个默认值了

这节课重点主要在于理解slot起到了一个占位作用，父组件调用时，把标签里面的内容放到slot的位置。

前端进阶_Vue 路由系统

 Vue 路由系统

 

 

 简单示例

main.js 

import Vue from ‘vue‘
import App from ‘./App.vue‘


//https://router.vuejs.org/zh/guide/#html 如有疑问。请看官方手册

// 1.引入 vue-router
import VurRouter from "vue-router"

//  3.定义（路由 ）组件
import Vmain from "./components/Vmain"
import Vcourse from "./components/Vcourse"
import Vmark from "./components/Vmark"

// 2.声明使用 vue-router
Vue.use(VurRouter);

// 4.定义路由对象，每个路由对象映射一个组件
const routes = [
  {path:"/",component:Vmain},
  {path:"/course",component:Vcourse},
  {path:"/mark",component:Vmark}
];

// 5.将路由对象的集合加载在 VurRouter 中
const router = new VurRouter({
  mode:"history",
  routes
});


new Vue({
  el: ‘#app‘,
  // 6. 挂载在 Vue 中
  router, // 相当于 routes：routes 的简写
  render: h => h(App),

});

// 7. 现在可以启动你的应用了

 

APP.vue

<template>
  <div>
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>
        <router-link to="/course">课程表</router-link>
      </li>
      <li>
        <router-link to="/mark">编辑器</router-link>
      </li>
    </ul>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <!--路由 出口-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: ‘app‘,
    data() {
      return {}
    },
    methods: {},
    computed: {},
    components: {},
  }
</script>

<style>

</style>

 

 

 

总结

 

　　准备：

　　　　引入vue-router

　　　　声明使用 

　　　　定义组件

　　　　映射组件URL

　　　　加载在 vue-router

　　　　挂载在 vue 上

　　使用：

　　　　　router-link 标签 

　　　　　to 属性到 URL

　　　　　router-view 展现组件内容