Vue中抽离组件模板的几种方式

最新推荐文章于 2024-01-04 11:39:39 发布

肆意&

最新推荐文章于 2024-01-04 11:39:39 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue html javascript

本文链接：https://blog.csdn.net/qq_33498329/article/details/104342781

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.全局组件和局部组件的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app">
			<component-public></component-public>
		</div>

		<div id="app2">
			<component-public></component-public>
		</div>
	</body>
</html>


<script type="text/javascript">
		Vue.component('component-public', {
			template:`<div>
						<h1>全局组件</h1>
					</div>`
		})
		const app = new Vue({
			el:"#app", 
			components:{ // 局部组件
				"component-private":{
					template:`
						<div>
							账号<input type="text" name="" id="" value="" />
							密码<input type="password" name="" />
							<button class="btn btn-success">登录</button>
							
						</div>
					`
				}
			}
		})

		const app2 = new Vue({
			el:"#app2"
		})
	</script>
</html>

2.组件模板分离编写的方式

通过script标签创建

   	
   <script type="text/x-template" id="component-script">
   	<div>
   		通过script标签编写组件
   	</div>
   </script>

通过template标签创建

	<template id="component-template">
   		<div>
   			通过template标签创建的组件
   		</div>
   	</template>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

肆意&

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue——抽离组件

张文慧期待每一天更好的自己

12-05

1232

建一个settingZwh.vue文件（子组件）编写HTML代码 <template> <div> <img :src="picture" width="2%"/> <span>{{showButton}}</span> <van-switch size="24px" class...

Vue组件的几种声明方式：Vue.extend、语法糖、script的type=“text/x-template“、template标签

weixin_59237016的博客

03-03

826

Vue.extend构造器写法，，语法糖写法vue实例中挂载注册为局部组件，， script的type="text/x-template"，组件模板的抽离写法，，template标签，组件模板的抽离写法

参与评论您还未登录，请先登录后发表或查看评论

Vue---组件模板抽离

北极星的博客

04-20

933

文章目录一.为什么要组件模板抽离二.使用<script>标签三.使用<template>标签一.为什么要组件模板抽离我们作为计算机专业的IT人员，十分注意代码的质量，比如笔者非常赞同雷军写代码要写“诗一样的代码”，我们在上一篇《Vue—主件详解》就通过语法糖简化了我们的注册过程，但是我们通过观察，发现在Vue中写Html代码显然有些臃肿，所以我们想到可以通过模板抽离的方法将我们在Vue中的Html代码或是其他模板分离出来，使得我们的代码更加整洁。没有使用组件模板分离前的实例：

Vue组件的抽离和封装

bob的博客

07-25

1956

1.背景日常开发中，有时候有些组件是功能类似甚至完全相同的情况，这个时候我们完全没必要再重新写一个，可以抽离复用可以减少大量的时间，案例：像一些App底部的标签页，在进行一些标签的跳转时，底部的只是变化选中时的字体颜色和图标，大部分的元素都相同。 2.抽离思路 2.1先抽出一个大的可以装里面小组件的大容器TabBar <div class='tabBar'> <tab-bar-item v-for="(val,index) in navBar" :path='val

vue中组件抽离方法合并实验 mixin.js

m0_53006021的博客

06-24

331

vue中组件抽离方法合并实验 mixin.js

vue项目如何进行头部组件的抽离复用

浮生离梦的博客

01-19

1534

创建一个头部组件HeaderTop，对于不同的页面，头部的中间内容title可能都不一样，所以我们可以通过父子组件传值的方式，通过props进行传值。而对于头部的左边和右边的内容，有的页面可能会有，有的页面可能不会有，可以通过插槽slot去解决，slot需要指明name的值，代码如下： <template> <div class="header"> ...

vue组件

sjs1766349405的博客

12-03

1476

一、组件化 1.简介组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。每个组件都是Vue的实例对象。我们实例化的Vue对象就是一个组件，而且是所有组件的根组件 2.全局注册组件 <body> <div id="app"> <my-header></my-header> <my-header>&l

vue-cli脚手架引入图片的几种方法总结

08-27

以下是在 Vue CLI 脚手架中引入图片的几种方法总结： import 方法在 Vue 组件中使用 import 语句引入图片是一种常见的方法。下面是使用 import 方法引入图片的步骤： 1. 在 `.vue` 文件中 import 图片，例如 `...

Vue（13）子组件与父组件超详细解析

weixin_43880991的博客

07-06

6615

父组件和子组件我们经常分不清什么是父组件，什么是子组件。现在来简单总结下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。具体代码如下 <div id="app"> <component2></component2> </div> <script> //...

Vue进阶之组件化开发

qq_42707967的博客

04-18

295

一.组件化思想介绍组件化开发，本质就是将相同功能的模块开发成一个个可以复用的小组件，然后通过引入各个组件实现一个完整页面的开发，组件化开发就像树结构一样，每一个组件都是树形结构上的一个分支节点 1.1 Vue实例创建组件在Vue中创建组件构造器有几种实现方式，但是大体思想包含3步，如下： 1.创建组件构造器 2.注册组件 3.在Vue实例对象中使用组件组件第一种创建使用方法，基于extend方式： <!DOCTYPE html> <html lang="zh"> &l

『精』Vue 组件如何模块化抽离Props

贤哲XianZhe的博客

11-04

908

假如有这么一个用于签名的组件，能够控制画笔的大小、颜色、画布背景颜色宽高、按钮的文案提示等，那么它的属性必定是有十几个选项，假设 800 行代码里可能就得花费 100 行去声明这些属性，这明显是不合适的。从优化的角度上看，Vue 的Props声明方式都是一样的，同样的代码写多次显得有些冗余，那不妨将这些 Props 声明再次优化一下，编写一个公共的 Props 辅助工具进行声明。其实 ElementUI 的源码也是这么去做的，以 el-empty 组件为例，源码中对于属性的分离是这么写的。

Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )

Python+大数据+数据分析+自动化+Vue组件开发

07-02

1098

前言有过开发经验的同学都知道，为使代码层次结构清晰分明，对于一些通用或常用的方法，都会将其抽象成公共方法或配置供使用者调用。例如：在做 Python 自动化测试过程中，经常需要连接数据库，进行增、删、改、查的操作。 add.py文件是给数据库添加数据的 update.py文件是更新数据库数据的 delete.py文件是删除某个条件下的数据库数据的后期可能在 add.py 文件中增加本次添加的数据进行删除的操作，这种情况下你觉得把数据库配置及操作代码写在哪合适呢？ 1.add.py,update.py,

vue 组件化组件模板分离

放弃很容易，坚持很难。

09-16

311

vue 组件化组件模板分离

vue.js三十八—— 抽离轮播图组件

武汉小喽啰

09-03

335

我们发现，在首页和商品详情都会使用到轮播图，但是，我们在首页的轮播图是写在页面中的，为了能够复用，我们可以将轮播图功能抽离成一个单独的组件。 1. 新建子组件swiper.vue模板 <template> <div> </div> </template> <script> export defau...

利用webpack配置,将vue项目中不同组件进行抽离,实现多项目维护一套代码

前端学习笔记

07-26

982

只写了一个小demo,将vue中的一个vue单独抽离,可以类比于如果多个项目是类似的,只有某个文件不一样,那么一样的部分可以作为公用,直接维护项目中不一样的部分,节省维护成本,不多说了,直接上代码将项目拆分成两个文件夹,一个是共用代码sameInfo,一部分是抽离代码differInfo 首先在differInfo中将抽离文件及package.json,router配置一下(home.vue)...

vue的抽离封装

qq_35653657的博客

01-11

240

vue3中的任何一个组合式的api都可以单独抽离出去在另一个文件中,最后只需要回归到setup()中即可.

抽离子组件的方法

weixin_45677987的博客

03-15

377

1：抽离子组件的方法：一般在实际开发项目，应用场景中，总有一些可以多复用的东西。就可以单独抽离出来组件。 2：首先创建子组件： EditComp.vue 3：在父组件中引用子组件： import EditComp from "./EditComp"; 4：注册组件：注册组件： component: { EditComp } 5: 就可以在父组件中使用子组件报错信息：Property or method "disable" i...

Vue中相同逻辑实现抽离

weixin_41262185的博客

04-24

1250

vue.mixin 用法给组件每个生命周期，函数等都混入一些公共逻辑原理源码 Vue.mixin = function (mixin: Object) { this.options = mergeOptions(this.options, mixin); // 将当前定义的属性合并到每个组件中 return this } 核心 export function mergeOptions ...

el-dialog+vue3抽离，父组件点击触发弹窗