第一种方式
1.1使用 Vue.extend 来创建全局的Vue组件
1.2使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象)
Vue.component
第一个参数:组件的名称,引用组件的时候,就是一个HTML 标签形式来引入的
第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容
1.3使用组件,直接把组件的名称,以 HTML 标签的形式,引入到页面中即可
var com = vue.extend({
template:'<h3>使用 Vue.extend 来创建全局的Vue组件</h3>'
})
Vue.component('myCom', com)
第二种方式
2.直接使用 Vue.component文章来源:https://www.toymoban.com/news/detail-729657.html
Vue.component('myCom', {
template: '<h3>直接使用 Vue.component</h3>'
})
第三种方式
3.1使用 Vue.component 来定义组件
3.2在被控制的div外面,使用 template 元素,定义组件的HTML模板结构文章来源地址https://www.toymoban.com/news/detail-729657.html
<div id="app">
<my-com></my-com>
</div>
<template id="com">
<div>
<h3>在被控制的div外面,使用 template 元素,定义组件的HTML模板结构</h3>
<p>第三种方式</p>
</div>
</template>
Vue.component('myCom', {
template: '#com'
})
到了这里,关于Vue定义全局组件的三种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!