uni-app 自定义组件

uni-app自定义强大的组件,封装好以后比较方便调用。

使用方法

1.创建目录

在根目录创建components文件夹,有本文件的可以跳过

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
     }

 

例如,在index.vue页面中,使用本自定义组件。调用代码如下

<template>
  <view>
    个人中心
    <postBox></postBox>
  </view>
</template>

<script>
  import postBox from "../../components/postBox.vue";
  export default {
    components: {
      postBox
    },
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style>

</style>

显示效果如图

4.传递参数

自定义组件,允许通过属性传入参数

在组件页面,export default中,添加props类,类中包括自定义参数名称,下面代码中,自定义了url和titleName属性。类型为String文本型。两种方式都可以定义,看自己喜好。

props:{
  url:{
  type:String
  },
  titleName:""
}

在代码中,可以使用代码<p>我是标题{{titleName}}</p> 获取传入的参数

调用:<postBox titleName="我是名称"></postBox>

5.生命周期

参考vue生命周期

 

 

上一篇 kotlin容器
下一篇 bat请求管理员权限代码
applek

applek管理员

个人说明在个人中心里面设置

本月创作热力图

最新评论
Kevin
Kevin
3月6日
请教,小网站,1000ip不到,小主机,2c4g,到底 redis 还是 macached 合适啊
hfloke
hfloke
3月1日
新版本安装更新后,页面有问题哦
丙氨酸
丙氨酸
2月27日
测试
评论于关于本站
RiseForever
RiseForever
2月23日
听说新主题发布了,来测试下评论区。
李贰捌
李贰捌
12月25日
AI摘要打开了,对接的阿里云,测试成功,但是前台为什么不显示?