vue全局组件与局部组件简栗

warning_千万不要尝试去背

于 2019-03-29 17:38:47 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_39034363/article/details/88898442

vue.js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单示例，展示了如何通过按钮点击切换局部与全局组件的显示。涉及Vue的基本语法、组件注册及动态组件的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		<div id="app">
			<button @click="lili">莉莉</button>
			<button @click="dudu">嘟嘟</button>
			<button @click="aisa">艾萨</button>
			<div>
				 <component :is="now" ></component>
				 <p>{{now}}</p>
			</div>
		</div>

let lili = {
	  template: '<h1>局部组件lili</h1>'
	}
	let dudu = {
	  template: '<h1>局部组件dudu</h1>'
	}
	
	Vue.component('aisa',{
	  template: '<h1>我是全局组件aisa!</h1>'
	})
	// 创建根实例
	new Vue({
	  el: '#app',
	  data(){
	  	return{
		     now: 'aisa'	
		} 
	  },
	  components: {
	      'lili': lili,//注册组件
	      'dudu':dudu,
	  },
	  methods:{
	  	lili(){
			this.now = "lili"
		},
		dudu(){
			this.now = "dudu"
		},
		aisa(){this.now = "aisa"}//所有实例都能用全局组件
	  },
	})