Vue定义全局组件的三种方式

简介: Vue定义全局组件的三种方式

第一种方式

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

Vue.component('myCom', {
      template: '<h3>直接使用 Vue.component</h3>'
    })

第三种方式

3.1使用 Vue.component 来定义组件

3.2在被控制的div外面,使用 template 元素,定义组件的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'
 })
相关文章
|
1天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
7 0
|
1天前
|
JavaScript
vue生成动态表单
vue生成动态表单
6 0
|
1天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
6 0
|
1天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
5 0
|
1天前
|
JavaScript 前端开发 开发者
new Vue() 发生了什么
new Vue() 发生了什么
8 1
|
1天前
|
JavaScript 容器
使用Vue写一个日期选择器
使用Vue写一个日期选择器
9 1
|
1天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
5 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
987 0
|
1天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
3 0
|
1天前
|
JavaScript 前端开发
vue中nextTick使用以及原理
vue中nextTick使用以及原理
5 0