首页 > 其他分享 >《全局实例篇》Vue.compont注册全局组件

《全局实例篇》Vue.compont注册全局组件

时间:2024-01-16 15:23:50浏览次数:18  
标签:Vue tagName compont 实例 注册 组件 全局

注册一个全局组件语法格式如下:

Vue.component(tagName, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

<tagName></tagName>

全局组件

所有实例都能用全局组件。

<div id="app">
	<runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

局部组件看其他博客

标签:Vue,tagName,compont,实例,注册,组件,全局
From: https://www.cnblogs.com/fusio/p/17967738

相关文章

  • 《标签篇》Vue.directives自定义指令v-my
    参考链接:https://www.runoob.com/vue2/vue-custom-directive.html自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus,该指令的功能是在页面加载时,元素获得焦点:<divid="app"> <p>页面载入时,input元素自......
  • 【vue】《 npm、pnpm和cnpm的区别及使用 》
    区别npm  NPM全称NodePackageManager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Vue/Node.js的包管理工具,相当于Java中的Maven、Python中的PIP。  npm是Node.js官方推出的包管理工具,它是JavaScript世界中最流行的包管理工具之一。通过......
  • 初始化一个vite+vue3的前端项目要做的额外的事儿
    添加.editorconfig文件#http://editorconfig.orgroot=true[*]charset=utf-8indent_style=spaceindent_size=4end_of_line=lfinsert_final_newline=truetrim_trailing_whitespace=true[*.md]insert_final_newline=falsetrim_trailing_whitespace......
  • vue引入图片的几种方式
    vue引入图片的几种方式:https://blog.csdn.net/qq_36571836/article/details/118806421?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-118806421-blog-80015777.235^v40^pc_relevant_3m_sort_dl_base2&spm=1001.2101.3001.4242......
  • vue在idea中的各级目录作用,工作流程
    vue工程目录作用预览:接下来进行我的一些理解记录:1.vue脚手架运行后,app.vue是所有页面的入口,会先进入到app.vue识别到router-linkto“”标签中router路由路径path,并且转到路由的路径下即src/router.2.根据app.vue中的路径对router中不同的path进行匹配,之后会获取到匹配......
  • VUE-组件间通信BUS
    VUE-组件间通信BUS1. 在src 下创建文件夹 eventBus 创建文件bus.jsimportVuefrom'vue';exportdefaultnewVue(); 创建文件busenum.jsletEvs={fun_struct_relation:"fun_struct_relation",//关联工程结构树};exportdefaultEvs;  2. 调......
  • 《vue新建篇》新建项目
    脚手架和webpack的区别"vueinitwebpack"是Vue.js2.x的旧方式,使用webpack模板创建项目。这种方式需要手动配置一些比较复杂的webpack配置,配置大量的选项,但是可以按照个人需求进行灵活的配置。这个命令可以用来创建高度定制化的Vue.js项目。"vuecreate"是Vue.js3.......
  • vue入门页面,搭建localhost官方默认页面
    按照提示操作可以做出下图效果:idea中的vue目录层级为:1.下载node.js(nodes.js是前端的运行环境,类似于后端中的jdk,没有node.js后续操作无法进行,具体流程百度)2.新建文件夹(这个文件夹就是你之后vue的目录)点进去新建的文件夹3.输入cmd回车4.输入命令:npmconfigsetreistryht......
  • 《vue概念篇》vue设计思路
    vue工作原理参考链接:https://www.cnblogs.com/lishanlei/p/8423407.html参考链接:https://www.cnblogs.com/wzfwaf/p/10553160.htmlMV模式之前,我们都是通过原生js操作dom元素,比如:获取内容、增加点击事件等,如果任务量非常大,那么我们的js代码会随着业务的增加变得臃肿,那么多逻辑,......
  • 《vue语法篇》基础语法
    ref和$ref在Vue中,$ref是一个特殊的属性,它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符,然后在Vue实例中使用$ref来访问该组件或元素。类似于id选择器。例如,假设您有一个组件:点击查看代码<template><div><inputtype="text"ref="myI......