VUE05 动态组件, 插槽, 具名插槽, 插槽案例

最新推荐文章于 2024-08-21 20:18:11 发布
最新推荐文章于 2024-08-21 20:18:11 发布
阅读量349 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38998319/article/details/117673083
版权

1.动态组件

<script>
    /*
        动态组件:
        加载哪个组件不一定
        在父标签中:
        <component :is="模板名"></component>
        模板名可以是变量,我们可以通过改变变量控制显示的内容
    */
</script>
<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <button @click='fun("demo1")'>1</button>
        <button @click='fun("demo2")'>2</button>
        <button @click='fun("demo3")'>3</button>
        <button @click='fun("demo4")'>4</button>
        <component :is="zhi"></component>

    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            zhi: 'demo1'
        },
        methods: {
            fun(v) {
                this.zhi = v
            }
        },
        components: {
            'demo1': {
                template: '<h1>我是demo1的组件niniu</h1>'
            },
            'demo2': {
                template: '<h1>我是demo2的组件heheda</h1>'
            },
            'demo3': {
                template: '<h1>我是demo3的组件666</h1>'
            },
            'demo4': {
                template: '<h1>我是demo4的组件hhh</h1>'
            }
        }
    })
</script>

</html>

 

2.插槽

<script>
    /*
        插槽(slot):
        1.使用插槽为了让组件更灵活
        2.让使用组件的人,可以决定组件内容的变化


        模板中:在要插入自定义内容的位置写<slot></slot>      
        html中:   slot 占位的内容写在有要使用的组件中间,  <组件名>插槽的内容</组件名> 

        注: 有多少个solt标签,运行时就有多少个自定义添加的html内容 

    */
</script>
<!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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>首页</h1>
        <my-demo>
            <h1> 我是首页的主体内容</h1>
        </my-demo>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        <h1>购物车</h1>
        <my-demo>
            <h3>我是购物车主体内容</h3>
            <h3>kkkkkkkkk</h3>
        </my-demo>

    </div>
</body>
<template id="demo">
    <div>
       
        <slot></slot>

        <div style="width: 100%;height: 200px; background-color: burlywood;">
            头部
        </div>

        <slot></slot>

        <div style="width: 100%;height: 200px; background-color: rgb(84, 210, 226);">
            尾部
        </div>

        <slot></slot>
    </div>
</template>

</div>


<script>
    new Vue({
        el: '#app',
        components: {
            'myDemo': {
                template: '#demo'
            }
        }
    })
</script>

</html>

3.具名插槽

<script>
    /*
        具名插槽(就是有名字的插槽)
        用法:

         html中:<span slot='插槽名'>首页</span>
         模板中:<slot name='插槽名'></slot>
    
    */
</script>
<!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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <my-demo>

        <span slot="right">....</span>
        <span slot='center'>搜索<input type="text"></span>
        <span slot="left">首页</span>
       </my-demo>



       <my-demo>
           <span slot="left">首页</span>
           <span slot="right">...</span>
           <span slot="center">库存-销量-评价</span>
       </my-demo>
   </div>
</body>
<template id="demo"> 
    <div>
        <h3>天猫商城</h3>
        <slot name='left'></slot>
        <slot name='center'></slot>
        <slot name='right'></slot>
    </div>
</template>


<script>
    new Vue({
        el:'#app',
        components:{
            'myDemo':{
                template:'#demo'
            }
        }
    })
</script>
</html>

 

4.列表案例

<!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>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<my-demo :classlist='user'>
			<button slot-scope='s1' @click='del1(s1)'>删除</button>
		</my-demo>
	</div>
</body>
<template id="tem1">
	<div>
		<table class="table table-bordered">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>classid</td>
				<td>操作</td>
			</tr>
			<tr v-for="(v,k) in classlist" :key="v.name">
				<td>{{v.name}}</td>
				<td>{{v.age}}</td>
				<td>{{v.classid}}</td>
				<td>
					<slot :id='k'></slot>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	new Vue({
		el: '#app',
		data: {
			user: [{
					name: '李白',
					age: 48,
					classid: 'H556'
				},
				{
					name: '张三',
					age: 48,
					classid: 'H556'
				},
				{
					name: '大白',
					age: 48,
					classid: 'H556'
				},
				{
					name: '小白',
					age: 48,
					classid: 'H556'
				},
			]
		},
		methods: {
			del1(v) {
				this.user.splice(v.id, 1)
			}
		},

		components: {
			'myDemo': {
				template: '#tem1',
				props: {
					classlist: {
						type: Array,
						default: ''
					}
				},
			}
		}
	})
</script>

</html>

子非鱼emma
关注
专栏目录
vue系列之 插槽(Slot) 详解
共同学习，共同成长
05-28 5045
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
Vue组件化开发-插槽的使用详解
begefefsef的博客
07-31 320
在开发中，我们会经常封装一个个可复用的组件前面我们会通过props传递给组件一些数据，让组件来进行展示；但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；我们应该让使用者可以决定某一块区域到底存放什么内容和元素；举个栗子假如我们定制一个通用的导航组件-NavBar这个组件分成三块区域左边-中间-右边，每块区域的内容是不固定；...
动态组件-插槽
一条小胖鱼
07-05 250
1.动态组件 目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件 场景：: 同一个挂载点要切换 不同组件 显示 创建要被切换的组件 - 标签+样式 引入到要展示的vue文件内, 注册 变量-承载要显示的组件名 设置挂载点 点击按钮-切换comName的值为要显示的组件名 小结：vue内置component组件, 配合is属性, 设置要显示的组件名字 1.1组件缓存 目标：组件切换会导致组件被频繁销毁和重新创建, 性能不高 补充生命周期: activated - 激活 deactivated
Vue官方文档(20):动态具名插槽
amadeus_liu2的博客
11-01 603
vue
Vue3学习笔记之插槽
最新发布
weixin_52102740的博客
08-21 641
快速了解Vue插槽
VUE动态组件,插槽和自定义指令_vue2 具名插槽 动态插槽
2401_84434086的博客
04-29 1054
如果在封装组件时需要预留多个插槽节点，则需要为每个插槽指定具体的name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下:注意:没有指定name名称的插槽，会有隐含的名称叫做’'default"。新建个active.vue文件,内容如下:(在这段代码定义了三个插槽,分别为标题,内容,作者)-- 文章标题 -->-- 文章内容 -->-- 文章作者 -->>div{
vue中具名插槽小案例
Canace_Xyxjjcaw的博客
03-22 152
实现效果： 实现代码： App.vue页面的代码： <template> <div class="container"> <Category title="美食"> <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" /> <a slot="footer" href="www.baidu.com">更多美食</a.
讲讲插槽~你知道插槽咩（上）？
m0_58875280的博客
08-16 305
你好呀，今天是心中有党的小王，听着红歌写博客。 讲讲插槽，今天先带大家初步认识插槽，明天会说具名插槽和自定义插槽嗷。
Vue 插槽全解析：默认、具名、条件、动态与作用域插槽实例探秘
07-09
Vue 插槽全解析：默认、具名、条件、动态与作用域插槽实例探秘
Vue作用域插槽实现方法及作用详解
10-15
而具名插槽允许我们在组件中定义多个出口，并且在使用组件时可以指定内容应该放在哪个出口中。 作用域插槽是一种特殊的具名插槽，它让父组件能够访问子组件的作用域内的数据。这通过将子组件的数据作为prop传递给...
vue 3 具名插槽、作用域插槽、自定义指令使用的table案例
m0_52411807的博客
07-25 409
提示文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
vue学习之——动态插槽名
qq_36836277的博客
03-22 9045
1.具名插槽的缩写 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header： <base-layout> <template #header> <h1>Here might be a page title</h1&g...
插槽-动态插槽名
链珠的博客
01-04 1080
<div id="demo"> <base-com> <template v-slot:[dynamicslotname]> This is Me. </template> </base-com> </div> <script> Vue.component('base-com',{ template:` <div..
vue中的插槽用法（动态插槽）
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-23 1667
1. 当一个组件有不确定的结构时, 就需要使用slot技术了 2. 注意: 插槽内容是在父组件中编译后, 再传递给子组件 3. 如果决定结构的数据在父组件, 那用默认slot或具名slot
动态组件&插槽
weixin_52905182的博客
11-07 347
动态组件
Vue——插槽
hulin的博客
04-16 1504
Vue的插槽
组件进阶-props校验、动态组件、组件进阶-keep-alive组件、指定缓存、默认插槽slot、具名插槽、作用域插槽、自定义指令
weixin_65100963的博客
05-09 472
组件进阶-props校验 props校验 普通格式： props: [“propA”, “propB”]。没有类型检查 高阶格式： props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true
vue3 插槽slot
irisMoon06的博客
12-17 611
插槽是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的 元素。 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。子组件 FancyButton 中插槽模板父组件填充插槽内容最终渲染出的 DOM 结构如下ps.具名插槽其实就是给插槽取个名字。
Vue-7【单个插槽、具名插槽、作用域插槽、动态组件】
Yesterday_Tomorrow的博客
12-07 311
一.插槽 <slot></slot> 内容分发的出口 如果直接静态传递，用胡子来表示会输出成字符串 所以用v-html来解决，但是会被包裹，template又不兼容v-html <div id="root"> <child content="<p>书籍b</p>"></child> </div> <script> Vue.component
Vue.js组件详解：插槽与具名插槽实战
本文将深入探讨Vue.js组件的高级概念，特别是插槽(Slot)功能，这是一个在构建可重用和灵活的组件时非常重要的特性。首先，让我们理解什么是插槽。插槽允许我们在子组件中动态地注入内容，无论是简单的文本、HTML片段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值