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生命周期