2021-08-06 vue笔记-插槽:匿名插槽,具名插槽和作用域插槽的定义和使用,在vue项目中使用插槽

前端OnTheRun

已于 2023-02-02 19:43:09 修改

阅读量437

点赞数

分类专栏： vue学习笔记文章标签： vue 插槽前端组件

于 2021-08-06 08:09:28 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/119410811

版权

本文介绍了Vue中的插槽，包括什么是插槽、插槽的作用，以及三种类型的插槽：匿名插槽、具名插槽和作用域插槽的定义与使用方法，通过示例详细解析了它们在网页和Vue项目中的应用。

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

文章目录

一,介绍插槽

1.什么是插槽?

理解

插槽就是在子组件中用<slot></slot>挖个坑,坑内内容由父组件来决定

子组件提供给父组件使用一个占位符slot,
父组件可在slot中填充任何模板代码，如 HTML、组件等，
填充的内容会替换子组件中的<slot></slot>标签。

作用

提高组件的重用能力

步骤

子组件:在指定位置留下<slot></slot>
父组件:引入,注册子组件,在子组件的同名占位符中写东西(如 HTML、组件等)

区分父子组件

(*换言之:使用了<slot></slot>或者<slot name-"xxx"></slot>的组件是子组件,使用了子组件名如<son>这里写准备插入子组件的内容</son>的是父组件)
这是区分插槽中的父子组件的标志,

对插槽的再次理解

即父组件把准备插入子组件中的内容放在子组件占位符中,
(如<son>插入内容</son>,在实际开发中插入内容可以是好几层标签,十几到几十行或者更多行代码),
而子组件预留一个槽位,在需要放置插入内容的位置留下<slot></slot>,代表此处即将被放入父组件插入的内容

2.插槽的种类

匿名插槽:没给插槽slot起名字,也叫默认插槽
具名插槽:给slot起名字(定义具名插槽:使用到name特性)
作用域插槽:本质是携带信息的匿名插槽

二.匿名插槽,具名插槽和作用域插槽的定义和使用:在网页和在项目中的使用示例

1.匿名插槽

1.1.匿名插槽定义和用法

略详见上面的插槽介绍

1.2.在网页使用匿名插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h3{
     
      color:blueviolet
    }
  </style>
</head>
<body>
  <!--默认存在一个根组件,是所有组件的父组件 -->
  <div id="app">
    <niming>匿名</niming>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
  //全局注册子组件niming
  Vue.component("niming",{
     
    template:`<div>我是<h3><slot></slot></h3>插槽</div>`
  });
  new Vue({
     
    el:"#app"
  })
</script>
</html>

在这里插入图片描述

1.3.vue项目中使用匿名插槽

(正确单词应该是component不是componment,下同)

父组件:FatherComponment.vue

<template>
  <div>
    <son-componment>
    	<h3>匿名</h3>
    </son-componment>
  </div>
</template>

<script>
import SonComponment from './SonComponment.vue';
export default {
     
  components: {
     SonComponment},
};
</script>

<style scoped>
</style>

子组件SonComponment.vue

<template>
  <div>

最低0.47元/天解锁文章

前端OnTheRun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-08-06 vue笔记-插槽:匿名插槽,具名插槽和作用域插槽的定义和使用,在vue项目中使用插槽

1.什么是插槽?理解作用步骤2.插槽的种类3.匿名插槽在网页使用匿名插槽vue项目中使用匿名插槽2.具名插槽在网页中使用具名插槽:结果在vue项目中使用具名插槽3.作用域插槽在网页中使用作用域插槽结果:在vue项目中使用作用域插槽(匿名插槽)在vue项目中使用作用域插槽(具名插槽)
复制链接

扫一扫