uni-app自定义组件

梦里梦外; 2023-07-18 05:55 106阅读 0赞

# uni-app自定义组件 #

###### 1、在项目中新建一个 component文件夹, 用来存放公用组件, 然后有新建组件如下图： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]

###### 2、在新建组件中需要在template标签中定义name属性,建议和文件名一样。并在默认导入函数中添加name属性基本代码如下： ######

<template name="postBox">
      <view>
        我是自定义组件
      </view>
    </template>
    
    <script>
      export default {
        name:"postBox",
        data() {
          return {
            
          };
        }
      }
    </script>
    
    <style>
    
    </style>

###### 3.调用自定义组件 ######

在其他的页面中，要调用自定义组件，需要先引用和注册组件  
在页面`<script>`标签中引入代码：`import postBox from "../../components/postBox.vue";`  
并且在`export default参数`中添加`注册组件代码`（若有多个组件用逗号隔开）

components:{
      postBox
         }

若在自定义组件中需要传值等操作建议参考[父子组件传值][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]: /images/20230528/a3609e9a94f9495a81b4e90d8a3b52c8.png
[Link 1]: https://blog.csdn.net/weixin_46353442/article/details/104838285

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 自定义全局组件

在 uni-app 中，自定义全局组件是很容易的。首先，你需要在项目的 `components` 目录下创建一个新文件，例如 `my-component.vue`。然后，在这个

阳光穿透心脏的1/2处/ 2024年03月25日 18:51/ 0 赞/ 97 阅读

相关自定义组件

自定义组件 1、组件的创建与引用 1.1、创建组件在项目的根目录中，鼠标右键，创建 components -> test 文件夹。在新建的 c

深碍√TFBOYSˉ_/ 2024年03月24日 15:44/ 0 赞/ 95 阅读

相关 uniapp onload调用自定义方法

function getTopNewsList(that){ uni.request({ url: "http://39.100.50.21:

水深无声/ 2022年12月22日 08:40/ 0 赞/ 249 阅读

相关 Uniapp自定义swiper滑动模块

Uniapp自定义swiper滑动模块简介参考文章上代码简介用Uniapp写的App端swiper滑动模块，主要是理解原理，如果后期有

秒速五厘米/ 2022年12月01日 15:43/ 0 赞/ 690 阅读

相关 uniapp 自定义弹窗组件

先上效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

墨蓝/ 2022年10月30日 10:25/ 0 赞/ 712 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 297 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 290 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 303 阅读

相关 uniapp自定义简单弹窗组件

前面写android混编学到了很多，没有时间全部积累起来，后面会慢慢记录的。最近很久没有记录了，因为一个新的uniapp的项目。最近在做这个。看了智慧团建上的弹窗很喜欢

超、凢脫俗/ 2021年11月02日 07:30/ 0 赞/ 902 阅读

相关 uniapp 自定义头部导航

html 引用需要自行更改图片路径 <view class="bac-box"></view>  <view

亦凉/ 2021年07月25日 16:17/ 0 赞/ 1120 阅读