1. Props and $ emit parent-child component communication
(The parent component is passed to the child component through a dynamic property, and the child component is rendered after getting it; bind the function @ add = ” addHandler ” in the child component, use this. $ Emit ( ' add ' , this.title) in the parent component )
(Props: the parent component passes information to the child component, $ emit: the child component triggers the event to the parent component)
2. Communication between components and custom events
(The function name is used when binding a custom event to facilitate unbinding, otherwise it may cause a memory leak )
index.vue
<template>
<div>
<Input @add="addHandler"/>
<List :list="list" @delete="deleteHandler"/>
</div>
</template>
<script>
import Input from './Input'
import List from './List'
export default {
components: {
Input,
List
},
data() {
return {
list: [
{
id: 'id-1',
title: '标题1'
},
{
id: 'id-2',
title: '标题2'
}
]
}
},
methods: {
addHandler(title) {
this.list.push({
id: `id-${Date.now()}`,
title
})
},
deleteHandler(id) {
this.list = this.list.filter(item => item.id !== id)
}
}
}
</script>Input.vue
<template>
<div>
<input type="text" v-model="title"/>
<button @click="addTitle">add</button>
</div>
</template>
<script>
import event from './event'
export default {
data() {
return {
title: ''
}
},
methods: {
addTitle() {
// 调用父组件的事件
this.$emit('add', this.title)
// 调用自定义事件
event.$emit('onAddTitle', this.title)
this.title = ''
}
}
}
</script>List.vue
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
{{item.title}}
<button @click="deleteItem(item.id)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import event from './event'
export default {
// props: ['list']
props: {
// prop 类型和默认值
list: {
type: Array,
default() {
return []
}
}
},
data() {
return {
}
},
methods: {
deleteItem(id) {
this.$emit('delete', id)
},
addTitleHandler(title) {
console.log('on add title', title)
}
},
mounted() {
console.log('list mounted')
// 绑定自定义事件
event.$on('onAddTitle', this.addTitleHandler)
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
// 及时销毁，否则可能造成内存泄露
event.$off('onAddTitle', this.addTitleHandler)
}
}
</script>3. Component life cycle
Usually can be divided into 3 stages: Mounting stage --- update stage --- destruction stage
(Life cycle hook = life cycle = life cycle function = life cycle event)
| beforeCreate() |
| After the instance is initialized, the data observer (data observer) and event / watcher event configuration is called Note: When the beforeCreate life cycle function is executed, the data in the data and methods have not been initialized |
| created() |
| It is called immediately after the instance is created. At this step, the instance has completed the following configuration: Data observation, operation of attributes and methods, callback of watch / event events However, the mounting phase has not yet begun and the $ el attribute is currently not visible Note: In created, data and methods have been initialized If you want to call the method in the methods or use the data in the data, the earliest in the created method |
| Whether to specify el and templete options |
| Indicates that vue starts to compile the template, executes the instructions in the vue code, and finally generates a compiled final template string in memory, which is rendered as the DOM in memory. At this time, the template is only rendered in memory, and the template is not mounted on the real page |
| beforeMount() |
| Called before the mount starts, the relevant rendering function is called for the first time Indicates that the template has been compiled, but the template has not been mounted on the page When beforeMount is executed, the element msg in the page has not been actually replaced, just some of the previous template characters |
| Create vm. $ El and replace el with it |
| In this step, the compiled template in memory is actually replaced into the page |
| mounted() |
| El is replaced by the created vm. $ el and mounted successfully Indicates that the template in memory has been mounted on the page, and the user can already see the rendered page Note: mounted is the last life cycle function during instance creation, when the execution of mounted indicates that the strength has been completely created If you want to operate the DOM node through some plug-ins, it must be installed at the earliest As long as mounted is executed, it means that the entire vue instance has been initialized. At this time, the component has left the creation phase and entered the running phase. |
| beforeUpdate() |
| Called when data is updated The data on the page has not been updated, but the data data has been updated, and the page has not been synchronized with the data |
| updated() |
| The component DOM has been updated and the component has been updated Page and data are consistent Note: The two functions beforeupdate and update in the component running phase will trigger according to the data change and then select |
| beforeDestroy() |
| Unbind, destroy subcomponents, event listeners When the beforeDestroy hook function is executed, the vue instance enters the destruction phase When beforeDestroy is executed, all data and methods of the instance, as well as filters and instructions, are available, and the destruction process has not been actually executed at this time |
| destroy() |
| The component has been completely destroyed and can no longer be used |
Parent-child component life cycle
The parent component will be initialized before the child component is initialized; the child component is rendered, the parent component will be rendered
Index created
List created
List mounted
Index mounted
Index before updated
List before updated
List updated
Index updated
Note: This part of the note comes from the MOOC course of Shuangyue Teacher: https://coding.imooc.com/learn/list/419.html
