六十九Vue组件
Posted zhangguosheng1121
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了六十九Vue组件相关的知识，希望对你有一定的参考价值。
一、组件概念
有html模板，有css样式，有js逻辑的集合体
每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用
1、根组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <h1>组件概念</h1> </div> </body> <script src="js/vue.js"></script> <script> // 组件：有html模板，有css样式，有js逻辑的集合体 // 根组件的模板就使用挂载点，子组件必须自己定义template（局部子组件， 全局子组件） new Vue( el: ‘#app‘, template: ` <div> <h1 style="color:red;">组件渲染的模板</h1> <h2 @click="action">副标题</h2> </div> `, data: , methods: action: function () alert(123) ) </script> </html>
2、局部组件
3、全局组件
以上是关于六十九Vue组件的主要内容，如果未能解决你的问题，请参考以下文章
Vue2.0学习—全局事件总线GlobalEventBus（六十一）