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

谁践踏了优雅 2021-10-19 07:16 487阅读 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 条评论，487人围观）

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

相关阅读

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

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

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

相关定义全局组件

import Vue from 'vue' import App from './App.vue' import router from './rout

爱被打了一巴掌/ 2023年05月31日 07:07/ 0 赞/ 29 阅读

相关 Vue.js note6（组件component的使用&全局组件&局部组件）

1、什么是组件我们知道，vue的核心是数据驱动与组件化，所以组件是非常重要的。那么组件是什么呢？组件的概念：组件即自定义控件，是Vue.js最强大的功能之一组

浅浅的花香味﹌/ 2023年02月27日 12:08/ 0 赞/ 18 阅读

相关 vue 全局自定义组件 components

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

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

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

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

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

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

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

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

相关全局组件和局部组件

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

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

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

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

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

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

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

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

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

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

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