vue中使用动态组件

最新推荐文章于 2024-06-20 16:15:29 发布
最新推荐文章于 2024-06-20 16:15:29 发布
阅读量3.2k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013320881/article/details/82974420
版权

1.怎么使用动态组件?

  • 1.< component >标签
  • 2.:is属性
  • 3.动态组件能自动切换组件，进行内容渲染
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue动态组件</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<component :is="type"></component>
		<button @click="headleBtnClick">change</button>
	</div>
	<script>
		Vue.component('child-one',{
			template: '<div v-once>child-one</div>'
		})

		Vue.component('child-two',{
			template: '<div v-once>child-two</div>' //动态组件每次回销毁一个组件，再创建另一个组件进行显示。  
			//v-once指令可以将静态内容加载入内存中，  
		})

		var vm = new Vue({
			el: '#app',
			data: {
				type: 'child-one'
			},
			methods: {
				headleBtnClick: function(){
					this.type = (this.type === 'child-one'?'child-two' : 'child-one' )
				}
			}
		})
	</script>
</body>
</html>
Pierce923
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件化开发——动态组件
weixin_47450807的博客
02-10 1092
一、案例引入 我们在引入动态组件的时候，首先先看一个例子：如图所示 我们想要实现上面点击button按钮实现tab栏切换，可以通过如下两种方式： 第一个是使用v-if进行判断,代码如图所示： 我们通过一个变量当前的值是否为某一个字符串，来确定是否需要展示某一个组件。但是明显存在一个缺点就是代码过于繁琐。 第二个方法:采用动态组件的形式 动态组件component是一个全局注册的组件，其中存在一个属性为is,值为组件名，并且兼容大小写。 二、参数传入 如果想要在component上向某一个组件上传递属
vue使用之动态组件
前端李小白的博客
10-08 683
有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里： 上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现： <!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></compone...
Vue高级运用之动态组件
weixin_61719769的博客
03-14 354
增强代码的维护性之Vue动态组件的基本用法
Vue.js 中的动态组件是什么？如何使用动态组件？
it_xushixiong的博客
06-05 6805
在Vue.js中，动态组件是一种可以动态切换组件内容和结构的技术。动态组件允许我们在不刷新整个页面的情况下，动态地加载不同的组件，并在同一个位置上进行切换。动态组件的核心概念是keep-alive组件。keep-alive组件是一种特殊的组件，它可以缓存被包裹的动态组件的状态和实例，从而避免在组件切换时重新渲染和销毁组件。
Vue2实现动态组件
qq_54548545的博客
06-11 231
Vue2实现动态组件
VueJS 之动态组件
两个月亮
02-03 5062
在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。
Vue 的动态组件
qq_42816270的博客
04-21 258
vue中的动态组件指的是在渲染组件时，根据数据和用户操作动态的切换和渲染不同的组件，使用动态组件可以提高组件的复用性和灵活性，根据不同的应用场景选择不同的组件。
vue中的动态组件
webchang的博客
01-25 7424
vue中的动态组件，代码演示和讲解
在vue组件中使用axios的方法
08-27
在Vue组件中使用Axios的方法 在Vue项目中，Axios是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。那么，在Vue组件中如何使用Axios呢？下面我们将详细讲解如何在Vue组件中使用Axios。 首先，在使用Axios之前...
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
Vue form表单动态添加组件实战案例
10-16
要删除动态添加的组件，我们需要在父组件中定义一个删除方法，如`deleteEducation`，接收要删除的索引作为参数。在该方法中，使用`splice`方法从数组中移除对应的元素。同时，如果在子组件中需要触发删除操作，可以...
使用Vue开发动态刷新Echarts组件的教程详解
08-27
在 App.vue 文件中，import Chart 组件，并在模板中使用它。将 Chart 组件的 id 设置为 "test"，并将其渲染到页面上。 五、第一次迭代 在第一次迭代中，我们已经实现了一个基本的 Echarts 组件，但是仍然存在一些...
Vue异步组件使用详解
08-30
在实际的Vue单文件组件(SFC)中，我们可以这样使用异步组件： ```html import Vue from 'vue' const searchSearch = Vue.component('searchSearch', function (resolve) { require(['./service-search.vue'], ...
【Vue3】动态组件
小秀的博客
08-08 9309
元素，并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值，可以动态切换渲染的组件。// markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。// markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。输出 comId 的值，出现 comId 的属性被劫持，出现性能浪费。// 这里不需要将对象中所有数据变为响应式，可以使用ref。// 这里不需要将对象中所有数据变为响应式，可以使用ref。// 这里不需要将对象中所有数据变为响应式，可以使用ref。
如何加载并执行远程vue模块
10-19 7578
为何需要远程加载vue组件？正常使用vue开发单页web app的时候不会遇到这种需求。不过当开发的产品作为一个服务平台，并允许第三方开发者在平台上发布自己的应用；或者需要在应用中加入插件机制方便扩展，但是又不想使用[iframe嵌入]这种low到没朋友的方式实现的话，就需要考虑是不是可以将远程模块xiu的一下抓过来执行了~如何远程加载？使用vue开发的项目大多会用webpack配合进行编译，而we
【vue3】远程组件加载
飘逸者打瞌睡
10-10 5207
添加remote目录，存放远程组件添加rollup.config.js，用来打包配置远程组件修改package.json。
vue - vue的动态组件(component)使用
qq_43886365的博客
11-24 4779
vue的动态组件(component)使用
vue的动态Template
最新发布
jansonKOU的博客
06-20 371
上面的配置是为了开启运行时编译的功能，正常情况下，是不开启的，在我们build项目后，我们的页面都已经打包成js文件，已经在js文件中生成了虚拟dom，只等我们访问页面后执行相关的代码即可，但是，template中的数据是在打包完成后的内容，尚未生成虚拟dom，是无法实现数据绑定的。对于前端工作的进行，我们在工作中大量使用了组件的开发思想，这样简化了我们的开发、提高了代码的复用、减轻了我们的维护或修改BUG的工作量、提高了团队开发的工作效率等多种优点。属性，指定该部分展示的组件。最后将该组件名赋值给。
vue-动态组件
程小博衍的博客
01-30 1260
vue-动态组件;性能；
vue3中如何使用动态组件
08-03
在Vue 3中，你可以使用动态组件来实现组件的动态渲染。你可以使用`<component>`标签，并通过`v-bind:is`属性来决定要渲染的实际组件。这个`is`属性可以是一个字符串，可以是HTML标签名，也可以是已注册的组件名。另外，你也可以直接将组件定义传递给`is`属性，而不是组件的名称。内置组件都可以传递给`is`属性，但如果你想通过名称传递组件，则需要先对其进行注册。如果将组件本身传递给`is`属性而不是其名称，则不需要注册。[2] 具体实现时，你可以在页面上注册需要使用的组件，然后使用`<component>`标签来动态渲染组件。你可以通过`v-bind:is`属性来指定要渲染的组件名称或组件定义。[3] 以下是一个示例代码，展示了如何在Vue 3中使用动态组件： ```html <template> <div> <button @click="switchComponent('A')">A组件</button> <button @click="switchComponent('B')">B组件</button> <button @click="switchComponent('C')">C组件</button> <component :is="currentComponent"></component> </div> </template> <script setup> import { ref } from 'vue'; import AComponent from './components/AComponent.vue'; import BComponent from './components/BComponent.vue'; import CComponent from './components/CComponent.vue'; const currentComponent = ref(''); const switchComponent = (componentName) => { currentComponent.value = componentName; }; </script> ``` 在上面的代码中，我们使用`<component>`标签来动态渲染组件。通过`v-bind:is`属性绑定了`currentComponent`变量，该变量保存了当前要渲染的组件名称。当点击不同的按钮时，调用`switchComponent`方法来切换要渲染的组件。[1] 希望这个例子能帮助你理解如何在Vue 3中使用动态组件。如果你有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值