Vue中Component全局组件和私有组件的定义和使用

谁践踏了优雅 2021-10-19 07:16 435阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>私有组件定义</title>
    		<script src="lib/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			
    			<all></all>
    			
    			<all2></all2>
    			
    			<one-component></one-component>
    			
    			<two-component></two-component>
    		</div>
    		
    		
    		<template id="all2">
    			<h1>这是第二个全局组件,他通过template id 定义在外面</h1>
    		</template>
    		<template id="two">
    			<h1>这是第二个私有组件，他通过template id 定义在外面</h1>
    		</template>
    		<script>
    			// 第一种全局组件定义方法
    			Vue.component('all',{
    				template:'<h1>这是一个全局组件</h1>'
    			})
    			
    			// 第二种全局组件定义方法
    			Vue.component('all2',{
    				template:'#all2'
    			})
    			
    			var app=new Vue({
    				el:'#app',
    				data:{
    					
    				},
    				methods:{
    					
    				},
    				// 定义私有组件
    				components:{
    					oneComponent:{
    						template:'<h1>这是第一个私有组件</h1>'
    					},
    					// 定义在外面的template
    					twoComponent:{
    						template:'#two'
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，435人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3中的组件：组件的定义、组件的属性和事件、组件的Slots和动态组件

1. 引言 Vue是目前最流行的JavaScript框架之一，它提供了一种简洁、高效的方式来构建用户界面。在Vue中，组件是构建应用程序的核心概念之一。组件可以封装可重用

电玩女神/ 2024年03月17日 21:35/ 0 赞/ 102 阅读

相关 vue自定义封装全局组件与使用

以前只知道第1种局部组件。每个页面都需要引入，注册，然后才能像2一样使用！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

雨点打透心脏的1/2处/ 2023年06月13日 09:37/ 0 赞/ 31 阅读

相关 vue 全局自定义组件 components

创建组件在/components目录下创建tabBar.vue <template> <div class="barBar-container">

╰半橙微兮°/ 2022年12月10日 01:20/ 0 赞/ 213 阅读

相关 vue的执行顺序(局部组件和全局组件)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_

短命女/ 2022年09月10日 09:27/ 0 赞/ 216 阅读

相关 vue组件的定义及复用性，局部组件和全局组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

不念不忘少年蓝@/ 2022年09月09日 09:54/ 0 赞/ 217 阅读

相关对于vue中的全局组件和局部组件的一点小见解

一开始接触到vue中的组件的时候，对于组件的理解还是不够充分的，在今天的学习中又加深了一点点的理解，为了方便以后的记忆，在这里写一下，所谓全局变量是针对vue实例下说的，即所有

系统管理员/ 2022年07月12日 02:11/ 0 赞/ 220 阅读

相关全局组件和局部组件

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

曾经终败给现在/ 2022年06月02日 10:23/ 0 赞/ 256 阅读

相关 vue定义全局单文件组件通过use形式使用组件

我们这一次来玩一下vue中如何来定义一个全局的组件，并且通过Vue.use()来使用首先我们应该在我们项目里面创建一个组件alert.vue,你们在玩的时候就随意啦想叫什么

约定不等于承诺〃/ 2022年03月15日 10:14/ 0 赞/ 404 阅读

相关使用vue.component封装全局组件的步骤

1：写好组件 <template > <div class="navbar navbar-default navbar-fixed-top

た入场券/ 2022年01月14日 13:31/ 0 赞/ 345 阅读

相关 Vue中Component全局组件和私有组件的定义和使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>私有组

谁践踏了优雅/ 2021年10月19日 07:16/ 0 赞/ 436 阅读