uniapp 封装组件的方法实例分析
作者：九亓
这篇文章主要介绍了uniapp 封装组件的方法,结合实例形式分析了uniapp父级页与子页面组件封装与传参交互相关实现技巧,需要的朋友可以参考下
最近研究了一下uniapp 的组件封装 以及 引入组件的页面(父级) 和 组件封装的页面(子级)的传参以及 事件交互 ，其实还是很简单的。
父级页(主要的动作有组件的引入和事件的触发)
<!--viwe部分-->
<template>
<view>
<!--调用组件 组件的属性 数据属性前面加 : 符号 事件加 @ 符号 因为父级页面无法直接改变子页面参数 可通过ref属性可调用子页的方法改变参数值 -->
<Assembly :TitleData="name" @trigger="GetData" ref="mySon">
<!-- 如果父级页面需要在组件中间加入代码 需要子页 插入的地方加上<slot></slot> -->
</Assembly>
<!--调用组件-->
</view>
</template>
<!--js部分 在这里声明注册组件-->
<script>
//只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
import Assembly from '@/components/assembly'
export default {
components: {
Assembly
},
data() {
return {
name:"" //这里的数据类型根据子级页定义
}
},
methods: {
GetData(){
console.log(触发事件了)
//这里触发父级事件 通过绑定名称mySon 直接执行子页方法foumr()
t.$refs.mySon.foumr();
}
}
}
</script>到这里 组件的调用 引入 注册 以及 数据和事件 基本 搞定了 然后来看下面
子页面(组件的存放和组件事件处理)
<template>
<view>
<view @click="SetName">姓名：{{TitleData}}</view>
<view>性别：{{gender}}</view>
<!--使用slot组件声明插入代码的位置-->
<slot></slot>
</view>
</template>
<script>
export default {
//需要给父页传值的参数都放在props里面 每个参数作为一个对象 都需要声明 传值的类型 type 以及内容 default 没有默认值时为空 type不可为空 ，如参数的值无需 交互 可直接写在 data=>return 里面
props: {
//这里定义的参数名称 在父页作为组件的属性用来绑定参数
TitleData:{
type:Array,
default:""
}
},
data() {
return {
gender："男女"
};
},
methods: {
SetName(){
// 在这里定义父页触发组件事假的属性名 trigger 后面可以传值 index
this.$emit('trigger',index)
},
},
};
</script>