uni-app 组件传值，组件方法调用，组件生命周期

uni-app 组件传值，组件方法调用

----------------------------------------------------------------------------

1：父组件向子组件传值

子组件：download.vue

</template>
	<view> {{downloadmsg}} </view>
</template>

<script>
	export default{
		props: {
			downloadmsg: {
				type: String,
				default: true
			}
		}
	}
</script>

• 使用 props 接收，并设置 type 类型
• default

①：type：String

			downloadmsg: {
				type: String,
				default: true
			}

②：type：Array

			downloadmsg: Array,
				default() {
					return ['', ''];
			}

③：type：Object

		downloadmsg: {
			type: Object,
			default() {
				return {};
			}
		},

④：type：Boolean

		downloadmsg: {
			type: Boolean,
			default: true
		},

父组件：index.vue

<template>
	<view>
		<download :downloadmsg="downloadmsg"></download>
	</view>
</template>

<script>
	import download from "../../components/download/download.vue"
	export default{
		components:{
			download
		},
		data() {
			return {
				downloadmsg:"世界你好"
			}
		},
	}
</script>

• import：引入子组件
• components：注册子组件
• downloadmsg：传输值的内容

----------------------------------------------------------------------------

2：父组件调用子组件方法

子组件：download.vue

</template>
	<view> {{downloadmsg}} </view>
</template>

<script>
	export default{
		methods:{
			childdown(){
				console.log("hello world");
			}
		}
	}
</script>

父组件：index.vue

<template>
	<view>
		<view @click="childMeth">调用子组件方法</view>
		<download ref="downloadmeth"></download>
	</view>
</template>

<script>
	import download from "../../components/download/download.vue"
	export default{
		components:{
			download
		},
		methods:{
			childMeth(){
				this.$refs.downloadmeth.childdown();
			}
		}
	}
</script>

• import：引入子组件
• components：注册子组件
• ref：为子组件设置一个 id
• this.$refs：使用子组件 id ，调用子组件方法

----------------------------------------------------------------------------

3：子组件调用父组件方法并传值

子组件：download.vue

</template>
	<view @click="childMeth"> 点我传值 </view>
</template>

<script>
	export default{
		methods:{
			childMeth(){
				this.$emit("parentMeth","世界你好");
			}
		}
	}
</script>

• this.$emit：调用父组件方法

父组件：index.vue

<template>
	<view>
		<download @parentMeth="parent" ref="downloadmeth"></download>
	</view>
</template>

<script>
	import download from "../../components/download/download.vue"
	export default{
		components:{
			download
		},
		methods:{
			parent(e){
				console.log(e);
			}
		}
	}
</script>

• import：引入子组件
• components：注册子组件

3：子组件生命周期

方法	描述
beforeCreate	组件初始化，但数据原生观测、自定义观测(event\watcher)没生成之前。 未完全创建阶段
created	组件创建后，但还未挂载 完全创建阶段
beforeMount	组件渲染后，挂载前。 渲染后待挂载
mounted	组件挂载到页面 可用 vm.$el 访问 挂载完成
beforeUpdate	虚拟 DOM 重新渲染和打补丁之前 再次渲染前
updated	组件 DOM 已经更新 再次渲染后
activated	keep-alive 组件激活时调用。 当前组件被激活：显示
deactivated	keep-alive 组件停用时调用。 当前组件隐藏
beforeDestroy	实例销毁之前调用。实例仍然完全可用。 销毁前
destroy	Vue 实例销毁后调用