vue.js全局组件和局部组件示例代码

组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下

全局组件和局部组件

全局组件的定义的代码

  全局组件 

局部组件的定义的代码

  局部组件 

附:自定义全局组件

全局组件用到的是 Vue.component(tagName,option),tagName是自定义的组件名称,option是组件构造器。具体使用方法如下:

在main.js中设置:

Vue.component('my-component', { template: '', data () { return { show: true } }, methods:{ clickShow(){ this.show = !this.show } } }) 

在组件中直接引用:

渲染结果为:

总结 

到此这篇关于vue.js全局组件和局部组件的文章就介绍到这了,更多相关vue.js全局组件和局部组件内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!

以上就是vue.js全局组件和局部组件示例代码的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程