深入浅析深入浅析Vue全局组件与局部组件的区别全局组件与局部组件的区别
主要介绍了Vue全局组件与局部组件的区别，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,
需要的朋友可以参考下
1、组件声明、组件声明
<!-- 全局组件模板father模板 -->
<template id="father">
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
var FATHER = {
template: "#father",
data: function() {
return {
name: "一个全局组件-模板-",
data: "数据：18892087118"
}
}
};
2、组件注册、组件注册
Vue.component('father', FATHER);
3、组件挂载、组件挂载
<h5>全局组件1</h5>
<father></father>
4、组件实例、组件实例
<!DOCTYPE html>
<html>
<head>
<title>vue2.0 --- 局部组件与全局组件</title>
</head>
<body>
<h3>vue2.0局部组件与全局组件</h3>
<div id='app'>
<h5>局部组件</h5>
<fatherlocal></fatherlocal>
<hr>
<h5>全局组件1</h5>
<father></father>
<hr>
<h5>全局组件2</h5>
<child :fromfather='giveData'></child>
</div>
<!-- 局部组件模板fatherlocal -->
<template id="father-local">
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
<!-- 全局组件模板father -->
<template id="father">
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
<template id="child">
<div>
<h3>这是{{name}}</h3>
<div>
<p>{{cmsgtwo}}</p>
资源评论
weixin_38674409
- 粉丝: 7
- 资源: 920
最新资源
- 基于HTML5的miniPaint浏览器端图像编辑利器设计源码
- 三轴桁架机械手工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- yolov8的概要介绍与分析
- 基于C++语言的算法竞赛模板设计源码
- 基于Vue框架的音制前台设计源码
- 基于JavaScript核心技术的个人健康平台项目源码设计
- 基于Vue的tpshion.cn门户网站设计源码
- 基于Servlet 3.1规范的smart-servlet多应用隔离部署Web容器设计源码
- 基于Prometheus的集成式运维告警中心设计源码
- 基于HTML语言的中医药1008（6）代码版本控制实训设计源码
- 基于JavaScript和HTML/CSS的实用小组件开发源码分享
- 基于Vite-Vue与Django-DRF的LuffyCity玩具项目前后端分离设计源码
- 数控等离子切割机工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- 撕离型纸模组 X_T工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- 基于C语言的内网穿透xfrpc客户端设计源码
- 基于SpringBoot+Vue的EcoNest二手交易平台设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
