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>