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管理员

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

本月创作热力图

最新评论
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?
风起云涌
风起云涌
6月17日
前台投稿现在有点太抽象了 希望可以弄成那种分区填写的 标题,内容,图片,目录,标签,这样的
评论于留言建议