全局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)

注意:1.如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把 大写的驼峰改为小写的字母,同时,两个单词之前使用 - 链接; 如果不使用驼峰,则直接拿名称来使用即可
2.不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只有唯一的一个根元素

第二种方式

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'
 })
发布了7 篇原创文章 · 获赞 0 · 访问量 92
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览