vue学习记录

一、vue 父子组件的生命周期执行顺序

1.父组件 beforeCreate

2.父组件 created

3.父组件 beforeMount

4.子组件 beforeCreate

5.子组件 created

6.子组件 beforeMount

7.子组件 mounted

8.父组件 mounted

销毁：

1.父组件 beforeDestroy

2.子组件 beforeDestroy

3.子组件 destroyed

4.父组件 destroyed

更新：

1.父组件 beforeUpdate

2.子组件 beforeUpdate

3.子组件 updated

4.父组件 updated

二、 父子组件传值（目前只用过一种）

1. 父传子

父组件

<template>
<view>
<Child :name="name" :title="title" @change="change"></Child>
</view>
</template>
<script>
import Child from "../../components/child.vue";
export default {
		components: {
			Child,
		},
        data() {
            return: {
               name: 'vernon',
               title: '大家好'
            }

        },
        methods: {
			change(e) {
				console.log(e)
				const that = this
				that.title = e
			},

}
</script>

子组件

子组件从props里拿父组件传过来的值

<template>
<view>
<view>我是{{name}},{{title}}。</view>
<button @tap="changeTitle"></button>
</view>
</template>
<script>
	const app = getApp()
	export default {
		name: "child",
		props: {
			name: {
				type: String,
				default:''
			},
            title: {
				type: String,
				default:''
			},
		},
		data() {
			return {
				
			}
		},
        methods: {
            changeTitle() {
                 this.$emit('change', '你们好')
            }
        }
		
	}
</script>

2. 子传父

子组件通过使用$emit发射事件

that.$emit("change", '你们好');

父组件: 拿到子组件的传值

change(e) {
	console.log(e)
	const that = this
	that.title = e
},