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模板结构文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目打断点的三种方式

    方式一:使用debugger 介绍:js自带的方法 优点:简单好用,不需要额外的配置 注意:生产环境下需要去掉 方式二:使用vsCode插件断点 介绍:vscode集成的断点调试,大佬必备 优点:减少浏览器和编辑器之间的频繁切换 提高开发效率 步骤: 安装插件 Debugger for Chrome(已废弃)

    2024年01月24日
    浏览(64)
  • (详解)vue中实现主题切换的三种方式

    目录 一、背景 二、实现思路  方法1:定义全局的CSS变量  方法2:切换已定义好的css文件  方法3:切换顶级CSS类名 (需使用css处理器,如sass、less等) 在我们开发中我们会遇到像是需要切换程序风格、 主题切换 啦这种应用场景。 参考大佬博客!!! vue中实现 ‘换肤 / 切换样

    2024年02月08日
    浏览(38)
  • 【Vue3】pinia管理数据的三种方式

    💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互

    2024年04月13日
    浏览(38)
  • vue项目引入element-ui的三种方式

    通过执行命令vue add element来进行引入 通过执行命令npm i element-ui -S安装依赖 main.js文件引入element-ui main.js文件全局引入element-ui样式 安装babel-plugin-component 修改babel.config.js文件 main.js按需引入组件

    2024年02月11日
    浏览(48)
  • Vue2封装自定义全局Loading组件

    前言 在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到Loading加载框,PC的一些UI库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。 效果图 如何封装? 第1步:创建要封装成全局组件的文件 第2步:注册组件 Loading这类的通用

    2024年02月15日
    浏览(37)
  • JavaScript的三种引用方式

    1.1、标签引用(或嵌入式) 使用 script 标签将 JavaScript 代码嵌入到 HTML 页面中。可以放置在 head 或 body 中。 显示效果: 1.2、 文件引用 (外链式) 将 JavaScript 代码编写在一个独立的 .js 文件中,并通过 script 标签的 src 属性引入到 HTML 页面中。 显示效果: 1.3、行内式 直接在

    2024年02月02日
    浏览(46)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(54)
  • uniapp引入全局js,vue2/vue3不同方式引入

    Hi I’m Shendi uniapp引入全局js,vue2/vue3不同方式引入 最近写小程序,个人开发,选用了 uni-app 进行开发 选用的 vue3 版本 因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined… Vue2 版引入全局js的方法如下 将js放到项目内,一般放到自建的

    2024年02月03日
    浏览(55)
  • 【React组件通讯的三种方式】

    React组件之间的通讯分为三种: 父组件 →子组件 子组件 →父组件 兄弟组件 步骤: 父组件提供要传递的state数据 给子组件标签添加属性,值为state中的数据 子组件中通过props接收父组件中传递的数据 项目演示: 使用脚手架生成一个React项目: npx create-react-app ex-app 运行项目

    2024年02月12日
    浏览(31)
  • echarts饼图自定义设置颜色的三种方式

    第一种方式 option下 整体代码如下: 效果如下: 第二种方式 series下 整体代码如下: 效果如下: 第三种方式 data下 整体代码如下: 效果如下:

    2024年02月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包