深入浅析深入浅析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
最新资源
- (源码)基于ESP32和AWS IoT Core的室内温湿度监测系统.zip
- (源码)基于Arduino的I2C协议交通灯模拟系统.zip
- coco.names 文件
- (源码)基于Spring Boot和Vue的房屋租赁管理系统.zip
- (源码)基于Android的饭店点菜系统.zip
- (源码)基于Android平台的权限管理系统.zip
- (源码)基于CC++和wxWidgets框架的LEGO模型火车控制系统.zip
- (源码)基于C语言的操作系统实验项目.zip
- (源码)基于C++的分布式设备配置文件管理系统.zip
- (源码)基于ESP8266和Arduino的HomeMatic水表读数系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
