Vue的全局组件和局部组件

AiDeMoLia

已于 2022-05-19 16:17:28 修改

阅读量1.3k

点赞数

分类专栏： Vue基础文章标签： vue.js

于 2022-05-19 15:42:13 首次发布

本文链接：https://blog.csdn.net/AiDeMoLia/article/details/124864552

版权

本文探讨了Vue项目中组件与实例的关系，指出每个组件本质上是一个实例。同时，阐述了全局组件与局部组件的区别：全局组件可在整个应用范围使用，而局部组件仅限于其挂载点。

摘要由CSDN通过智能技术生成

1.组件与实例的关系

在一个Vue项目里面都是由n个实例所组成的，所以每一个组件也是一个实例。
比如以下：在组件里面写一个点击事件也是可以的。

<div id=root>
			<div v-text="texts"></div>
			<input v-model="inputValue" />
			<button @click="handleClick">提交</button>
			<ul>
				<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
			</ul>
		</div>
<script>
//			全局组件
			Vue.component('todo-item',{
				props:['content'],
				template:'<li @click="handclick">{
  {content}}<li>',
				methods:{
					handclick:function(){
						alert('hello world')
					}
				}
			})
</script>

2.全局组件和局部组件的区别：

全局组件可以在整个模板里面使用。
局部组件只能在挂载点里面使用。

<!DOCTYPE html>
&

最低0.47元/天解锁文章

AiDeMoLia

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的全局组件和局部组件

<div id=root> <div v-text="texts"></div> <input v-model="inputValue" /> <button @click="handleClick">提交</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item"><.
复制链接

扫一扫

专栏目录