19-普通组件的注册使用

这篇具有很好参考价值的文章主要介绍了19-普通组件的注册使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

普通组件的注册使用-局部注册

一. 组件注册的两种方式:
1.局部注册:只能在注册的组件内使用

        (1) 创建 vue 文件(单文件组件)

        (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 }

        19-普通组件的注册使用,vue.js

// 导入需要注册的组件
import 组件对象 from.vue文件路径
import HmHeader from './components/XxHeader'

export default { 
    // 局部注册
    components: {
        组件名: 组件对象
        HmHeader: HmHeader
    }
}

2.全局注册:所有组件内都能直接使用(不需要再次导入)

        (1) 创建 .vue文件(单文件组件)

        (2) main.js 内导入, 并进行全局注册 Vue.component(组件名, 组件对象)

19-普通组件的注册使用,vue.js

// main.js
// 导入需要全局注册的组件
import XxButton from './components/XxButton'

// 调用 Vue.component 进行全局注册
// Vue.component('组件名',组件对象)
Vue.component('XxButton', XxButton )

二. 使用:

        * 当成 html 标签使用 <组件名></组件名>

        * 技巧: 一般都用局部注册,如果发现确实是通用组件,再抽离到全局

三. 注意:

        * 组件名规范 -> 大驼峰命名法, 如 XxHeader文章来源地址https://www.toymoban.com/news/detail-660576.html

局部注册代码演示:

// 子组件: components / XxHeader.vue
<template>
    <div class="xx-header">
        我是头部组件xx-header
    </div>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  .xx-header{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #8064a2;
    color:white;
  }

  </style>
//子组件: components / XxMain.vue
<template>
    <div class="xx-main">
        我是主体组件xx-main
    </div>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  .xx-main{
    height: 400px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #f79646;
    color:white;
    margin: 20px 0;
  }

  </style>
// 子组件: components / XxFooter.vue
<template>
    <div class="xx-footer">
        我是低部组件xx-footer
    </div>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  .xx-footer{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #4f81bd;
    color:white;
  }

  </style>
// 根组件 App.vue
<template>
  <div class="App">
    <!-- 头部组件 -->
    <XxHeader></XxHeader>

    <!-- 主体组件 -->
    <XxMain></XxMain>

    <!-- 底部组件 -->
    <XxFooter></XxFooter>

    <!--如果 XxMain + tab 不快捷出标签 -> 需要配置 vscode
      左下角设置中搜索 -> trigger on tab ->  勾上
    -->
    

  </div>
</template>


<script>
import XxHeader from './components/XxHeader.vue'
import XxMain from './components/XxMain.vue'
import XxFooter from './components/XxFooter.vue'

export default{
    components:{
      // '组件名':组件对象
      XxHeader:XxHeader,
      XxMain,
      XxFooter
    }

}
</script>



<style>
.App{
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

全局注册代码演示:

// 子组件: components / XxButton.vue

<template>
    <button class=xx-button>通用按钮</button>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  
.xx-button{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: #3bae56;
    border-radius: 5px;
}
  </style>
// main.js 进行全局注册

// 文件核心作用: 导入App.vue, 基于App.vue创建结构渲染index.html

import Vue from 'vue'
import App from './App.vue'

// 1. 编写导入的代码,往代码的顶部编写(规范)
import XxButton from './components/XxButton'


Vue.config.productionTip = false

// 2. 组件进行全局注册 -> 在所有的组件范围内都能直接使用
// Vue.component(组件名,组件对象)
Vue.component("XxButton",XxButton)


new Vue({
  // el: "#app", 作用: 和 $mount('选择器')作用一致,用于指定Vue所管理容器
  //render: h => h(App),
  render:(createElement) => {
    // 基于 App 创建元素结构
    return createElement(App)
  }
}).$mount('#app')
// 在其他组件直接使用(不需要导入) XxFooter.vue

<template>
    <div class="xx-footer">
        我是低部组件xx-footer

        <!-- 全局组件使用 -->
        <XxButton></XxButton>
    </div>
  </template>

到了这里,关于19-普通组件的注册使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue3使用flv.js播放推流视频,完整版组件

    目录 前言 1、构建 2、销毁 3、断流、卡顿重连 4、报错、停滞重连 5、累计延时处理 6、手动全屏 前言 本人是在vue3中使用flv.js处理推流时,遇到的一些问题,以及处理办法,归纳总结为一个组件,仅限于推流使用。 目前只贴出部分关键代码,若需要完整的代码,请往github下

    2024年02月16日
    浏览(42)
  • Js:apply/call/bind、作用域/闭包、this指向(普通,箭头,JS/Vue的this)

    共同点: apply()、call() 和 bind() 方法 三者作用都是 改变this指向。 接收的第一个参数都是this要指向的对象 区别: apply只有两个参数,第二个参数为数组; call和bind传参相同,多个参数依次传入的; call和apply都是对函数进行直接调用(立即执行),而bind方法不会立即调用函数

    2023年04月08日
    浏览(94)
  • Vue全局组件和局部组件的注册

      组件的简介 : 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 组件的基本使用: 创建一个Vue实例需要创建后才能使用,组件也需要进行注册后才能使用。注册

    2023年04月23日
    浏览(50)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(98)
  • VUE工程化--vue组件注册

    组件注册的两种方式: 1. 局部注册:只能在注册的组件内使用 2. 全局注册:所有组件内都能使用   局部注册步骤:         1、导入         2、注册组件--注册成html标签(components中)         3、页面中使用标签 实现效果:   全局注册步骤( main.js ):         1、导入

    2024年01月18日
    浏览(40)
  • Vue 注册组件介绍

    Vue组件是一种可复用的Vue实例,用于封装可重用的HTML元素、JavaScript代码和CSS样式。它可以让开发者更好地组织和复用代码,使Web应用程序更加可维护和可扩展 Vue组件通常由三部分组成:模板(template)、数据(data)和方法(methods)。 模板:用于定义组件的 结构和布局 ;

    2024年02月04日
    浏览(28)
  • Vue 批量注册全局组件

    在项目开发中,我们经常会封装一些全局组件,然后在入口文件中统一导入,这时就会出现一个问题,如果我封装了很多组件,假如有成百上千的组件,都想注册成全局组件,那岂不是入口文件要引入几千行,显然这样是很笨拙的,所以就出现了 批量注册全局组件。 注: 批

    2024年01月22日
    浏览(44)
  • Vue3 - 组件注册

    组件的注册 组件注册分为全局注册为和局部注册 全局注册 全局注册就是通过app.component(\\\'组件名\\\', 组件实例) 通过app.component()全局注册还可以进行链式调用进行多组件注册,如下: 全局注册之后再该应用下的任意组件模板中都可以使用,无需再单独注册 局部注册 在单个组件

    2024年02月04日
    浏览(37)
  • Vue3---组件全局注册

    1. 组件封装成插件 2. 引用注册 3. 使用组件

    2024年02月13日
    浏览(38)
  • vue3基础: 组件注册

    组件注册 一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。 全局注册 我们可以使用 Vue 应用实例的.component()方法,让组件在当前 Vue 应用中全局可用。 全局注册的问题: 全局注册,但并没有

    2024年02月02日
    浏览(74)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包