Chao's Blog Chao's Blog
首页
  • vue

    • vue路由
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • java
  • spring
  • springboot
  • springcloud
  • git
  • maven
  • nginx
  • tomcat
  • springmvc
  • jvm
  • 图数据库
  • mysql数据库
  • redis数据库
  • windows下docker安装nginx并挂载目录
  • linux命令
  • linux安装软件
  • linux脚本
  • idea
  • vscode
  • 归档
  • 综合项目

    • 若依项目
    • mall项目
  • java
  • mybatis
  • xxl-job
  • mybatis
GitHub (opens new window)

~chao

永远菜鸟,不断努力~
首页
  • vue

    • vue路由
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • java
  • spring
  • springboot
  • springcloud
  • git
  • maven
  • nginx
  • tomcat
  • springmvc
  • jvm
  • 图数据库
  • mysql数据库
  • redis数据库
  • windows下docker安装nginx并挂载目录
  • linux命令
  • linux安装软件
  • linux脚本
  • idea
  • vscode
  • 归档
  • 综合项目

    • 若依项目
    • mall项目
  • java
  • mybatis
  • xxl-job
  • mybatis
GitHub (opens new window)
  • vue

    • vue中的vuex
    • vue路由相关
    • vue插槽相关
    • vue的computed和watch方法区别
    • vue的slice方法详解
    • vue2脚手架vue-cli搭建过程
  • JavaScript文章

  • 学习笔记

  • 前端
  • vue
~chao
2022-11-16

vue插槽相关

  1. 在vue3中插槽的写法必须在外面包裹
<child>
  <template v-slot="header">
    <button>按钮</button>
  </template>
</child>
1
2
3
4
5
  1. 在vue2中原来的写法是
<child>
    <button slot="header">按钮</button>
</child>
1
2
3
  1. 父组件中所有的内容都是在父组件中编译的,子组件中所有的内容都是在子组件中编译的。
<child>
  <template v-slot="header">
    <button>{{message}}</button>
  </template>
</child>
1
2
3
4
5

假如父组件中的message是helloworld,子组件中的message是你好,那么在页面显示中,显示的内容是helloworld,因为这个内容是在父组件中编译的

  1. 默认插槽、具名插槽、作用域插槽

作用域插槽:样式模板由父组件确定,数据由子组件提供
子组件提供给父组件的内容将汇总为一个对象,取值时取对象参数名

编辑 (opens new window)
上次更新: 2024/01/26, 05:03:22
vue路由相关
vue的computed和watch方法区别

← vue路由相关 vue的computed和watch方法区别→

最近更新
01
python使用生成器读取大文件-500g
09-24
02
Windows环境下 Docker Desktop 安装 Nginx
04-10
03
使用nginx部署多个前端项目(三种方式)
04-10
更多文章>
Theme by Vdoing | Copyright © 2022-2024 chaos | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式