博客

最近研究了一下uniapp 的组件封装 以及 引入组件的页面(父级) 和 组件封装的页面(子级)的传参以及 事件交互 ，其实还是很简单的。

父级页(主要的动作有组件的引入和事件的触发)

<!--viwe部分-->
<template>
	<view class="page">
	<!--调用组件 组件的属性 数据属性前面加 : 符号 事件加 @ 符号 因为父级页面无法直接改变子页面参数 可通过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 class="wrap">
		<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>