• vue中插槽的详解

    目录

    1. slot-插槽的基本使用

    1.1什么是插槽？

     1.2默认插槽

    2.具名插槽:(有名字的插槽)

    3.作用域插槽: 

     3.1接收作用域插槽几种写法：

    3.2完整代码

    1. slot-插槽的基本使用

    1.1什么是插槽？

    插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

     1.2默认插槽

    1. <body>
    2. 		<div id="app">
    3.            <cpn>
    4. 			   <h2 style="color: red;">我们在学习插槽h2>
    5. 		   cpn>
    6. 		div>
    7. 		
    8. 		<template id="cpn">
    9. 			<div class="cpn">
    10. 				<h2>{{msg}}h2>
    11. 				
    12. 		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8">script>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<cpn>
    17. 				<span>111222333span>
    18. 				<span slot="left">这是左边具名插槽span>
    19. 				<span slot="center">这是中间具名插槽span>
    20. 				<span slot="right">这是右边具名插槽span>
    21. 				
    22. 			cpn>
    23. 		div>
    24. 		<template id="cpn">
    25. 			<div class="cpn">
    26. 				<h2>{{msg}}h2>
    27. 				
    28. 				<slot name="center">slot>
    29. 				<slot name="left">slot>
    30. 				<slot name="right">slot>
    31. 				<slot>没有具名的插槽slot>
    32. 			div>
    33. 		template>
    34. 		<script>
    35. 			const cpn = {
    36. 				template: '#cpn',
    37. 				data() {
    38. 					return {
    39. 						msg: '我们晚上也在上课 很努力'
    40. 					}
    41. 				}
    42. 			}
    43. 			const vm = new Vue({
    44. 				el: '#app',
    45. 				data() {
    46. 					return {}
    47. 				},
    48. 				components: {
    49. 					cpn
    50. 				}
    51. 			})
    52. 		script>
    53. 	body>
    54. html>

    文字的内容位置，是根据插槽的位置决定的，插槽就相当于电脑里的usb接口，在父组件中去接收就相当于优盘插入插槽，一一对应。

    3.作用域插槽: 

    组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字="变量" ，变量上就会绑定slot传递的属性和值

    什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染

     ​

     3.1接收作用域插槽几种写法：

    2. 				
    3. 				
    4. 				
    5.

    3.2完整代码

    （父组件app）

    1. <template>
    2.   <div id="app">
    3.     
    4.   <my-header>
    5.     <template #default='list'>
    6.       
    7.       <ul>
    8.         <li v-for="(item,index) in list.moves" :key="index">{{item}}li>
    9.      ul>
    10.     template>
    11.   my-header>
    12.  
    13.   <my-header>
    14.     <template slot-scope="list">
    15.       
    16.       <ol>
    17.         <li v-for="(item,index) in list.moves" :key="index">{{item}}li>
    18.      ol>
    19.     template>
    20.   my-header>
    21.  
    22.    <my-header>
    23.     <template v-slot:default="list">
    24.       <h3 v-for="(item,index) in list.moves" :key="index">{{item}}h3>
    25.     template>
    26.   my-header>
    27.   
    28. 				
    29. 				
    30. 				
    31. 				
    32.   div>
    33. template>
    34.  
    35. <script>
    36. import MyHeader from "./components/MyHeader.vue";
    37.  
    38. export default {
    39.   name: "App",
    40.  
    41.   components: {
    42.     MyHeader,
    43.   },
    44. };
    45. script>
    46.  
    47. <style>
    48. #app {
    49.   font-family: Avenir, Helvetica, Arial, sans-serif;
    50.   -webkit-font-smoothing: antialiased;
    51.   -moz-osx-font-smoothing: grayscale;
    52.   text-align: center;
    53.   color: #2c3e50;
    54.   margin-top: 60px;
    55.   display: flex;
    56.   justify-content: space-around;
    57. }
    58.  
    59. style>

    （子组件中）

    1. <template>
    2.   <div class="header">
    3.     <h2>{{msg}}h2>
    4.     
    5.     <slot :moves='moves'>我是默认内容slot>
    6.     
    7.   div>
    8. template>
    9. <script>
    10. export default {
    11.   name: "MyHeader",
    12.   data() {
    13.     return {
    14.       moves: [
    15.        '金榜','热榜','人气榜'
    16.       ],
    17.       msg:'歌曲排行'
    18.     };
    19.   },
    20. };
    21. script>
    22. <style scoped>
    23. div {
    24.   color: red;
    25. }
    26. .header{background-color: bisque;
    27. width: 200px;
    28. height: 300px;
    29. text-align: center;}
    30. style>

    效果：（使用相同的数据，不同的结构类型，通过作用域插槽实现父子组件通讯，父组件使用子组件数据，对子组件进行修改）

     

  • 相关阅读:
    vue3中实现elementPlus表格选中行的上移下移
    Mac系统，webots和pycharm联合仿真，配置问题解决方案！
    【Linux】Ubuntu存储分析
    我的Go gRPC之旅、01 初识gRPC，感受gRPC的强大魅力
    md5算法实现
    解决VUE报错GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)
    动态分配内存
    PyCharm安装教程
    刷题分享—常见的经典面试题二
    C语言第十八弹---多个字符从两端移动向中间汇聚
  • 原文地址：https://blog.csdn.net/m0_71345904/article/details/126269942