组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
Vue data访问
<!-- prop -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v2.prop属性</div>
<hr />
<div>
<div>
<comp05 msg="13579"></comp05>
</div>
</div>
</div>
<!-- 局部组件 -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.局部组件</div>
<hr />
<div>
<div>
<comp03></comp03>
</div>
</div>
</div>
<!-- 全局组件 -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.全局组件</div>
<hr />
<div>
<div>
<comp01></comp01>
</div>
</div>
</div>
<script>
Vue.component(
'comp01', {
template: '<h2>自定义组件!</h2>'
}
);
Vue.component(
'comp05', {
props: ['msg'],
template: '<h4>{{msg}}</h4>'
}
);
new Vue({
el: "#appVue",
data: {
count: 999
},
components: {
'comp03': {
template: '<h3>自定义组件!</h3>'
}
}
}
)
</script>
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
<title>v-xxx</title>
</head>
<body style="height: 100%;">
<style>
.style0 {
font-size: 25px;
color: green;
}
.style1 {
background: gold;
}
</style>
<!--
VUE组件
REF:
http://www.runoob.com/vue2/vue-component.html
https://cn.vuejs.org/v2/guide/components.html
-->
<div id="appVue">
<!-- prop -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v2.prop属性</div>
<hr />
<div>
<div>
<comp05 msg="13579"></comp05>
</div>
</div>
</div>
<!-- 局部组件 -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.局部组件</div>
<hr />
<div>
<div>
<comp03></comp03>
</div>
</div>
</div>
<!-- 全局组件 -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.全局组件</div>
<hr />
<div>
<div>
<comp01></comp01>
</div>
</div>
</div>
</div>
<script>
/* 全局组件 */
Vue.component(
'comp01', {
template: '<h2>自定义组件!</h2>'
}
);
/* 通过 props 把数据传给子组件 */
Vue.component(
'comp05', {
props:['msg'],
template: '<h4>{{msg}}</h4>'
}
);
new Vue({
el: "#appVue",
data: {
count: 999
},
/* 局部组件 */
components: {
'comp03': {
template: '<h3>自定义组件!</h3>'
}
}
}
)
</script>
</body>
</html>
REF:
http://www.runoob.com/vue2/vue-component.html
https://cn.vuejs.org/v2/guide/components.html
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)