vue.js 定义全局组件和局部组件的方法
honey缘木鱼
发布于 2019-02-21 09:09:16
发布于 2019-02-21 09:09:16
代码可运行
运行总次数：0
代码可运行
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。我们经常会自定义很多组件以满足我们不同的需求。
一.自定义全局组件
方法1.
全局组件用到的是 Vue.component(tagName,option)，tagName是自定义的组件名称,option是组件构造器。具体使用方法如下：
在main.js中设置：
Vue.component('my-component', {
template: '<button v-on:click="clickShow">切换<h1 v-show="show">全局组件的学习</h1></button>',
data () {
return {
show: true
}
},
methods:{
clickShow(){
this.show = !this.show
}
}
})在组件中直接引用：
<template>
<div>
<my-component ></my-component>
</div>
</template>渲染结果为：
image
方法2.
Vue.extend(options) Vue.extend返回的是一个“扩展实例构造器”，不是具体的组件实例，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上.
在main.js中设置：
var Profile = Vue.extend({
template: '<button v-on:click="show=!show">切换<h1 v-show="show">全局组件的学习</h1></button>',
data: function () {
return {
show: true
}
}
})
Vue.component('my-component',Profile)
//Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件同上直接引用，渲染结果同上。
注：**data** 在 Vue.extend()**中它必须是**函数**。**
二.局部组件使用
- 在文件夹conponents下创建自定义的组件MyComponent.vue，组件样式为：
template>
<div>
<button v-on:click="show=!show">切换
<h1 v-show="show">全局组件的学习</h1>
</button>
</div>
</template>- 需要的地方引入和使用组件
components: {
'my-component': MyComponent
},<template>
<div>
<MyComponent></MyComponent>
</div>
</template>注: 组件内容过多情况下使用局部组件使代码更加清晰明了！
使用组件容易遇到问题：https://cloud.tencent.com/developer/article/1393996
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.01.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
Vue.js——组件快速入门（下篇）
更多 >
腾讯云开发者
