Vue-component
组件（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>'
}
);
/* 通过 props 把数据传给子组件 */
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
