1. props和$emit父子组件通讯
（父组件通过一个动态属性传递给子组件，子组件拿到后渲染；在子组件中绑定函数@add=”addHandler”，父组件中使用this.$emit(‘add’, this.title)）
（props：父组件向子组件传递信息，$emit：子组件向父组件触发事件）
2. 组件间通讯和自定义事件
（在绑定自定义事件时使用了函数名，方便解绑，否则可能造成内存泄漏）
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. 组件生命周期
通常可以分为3个阶段：挂载阶段---更新阶段---销毁阶段
（生命周期钩子 = 生命周期 = 生命周期函数 = 生命周期事件）
| beforeCreate() |
| 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用 注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化 |
| created() |
| 在实例创建完成之后被立即调用，在这一步，实例已完成以下配置： 数据观测（data observer）、属性和方法的运算、watch/event事件回调 然而，挂载阶段还没开始，$el属性目前不可见 注意：在created里面，data和methods已经被初始化 如果要调用methods中的方法或者使用data中的数据，最早在created方法中 |
| 是否指定el和templete选项 |
| 表示vue开始编译模板，执行vue代码中的指令，最终在内存中生成一个编译好的最终模板字符串，渲染为内存中的DOM。此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中 |
| beforeMount() |
| 在挂载开始之前被调用，相关渲染函数首次被调用 表示模板已经编译完成，但是尚未把模板挂载到页面 在beforeMount执行的时候，页面中的元素msg还没有真正替换过来，只是之前的一些模板字符 |
| 创建vm.$el，并用其替换el |
| 这一步，将内存中编译好的模板真实替换到页面中 |
| mounted() |
| el被创建的vm.$el替换、挂载成功 表示内存中的模板已经真实的挂载到页面中，用户已经可以看到渲染好的页面了 注意：mounted是实例创建期间的最后一个生命周期函数，，当执行完mounted就表示实力已经被完全创建好了 如果要通过某些插件操作DOM结点，最早要在mounted中 只要执行了mounted就表示整个vue实例已经初始化完毕了，此时组件已经脱离了创建阶段，进入运行阶段 |
| beforeUpdate() |
| 数据更新时调用 页面上的数据还没有被更新，但是data数据已经被更新了，页面尚未和数据保持同步 |
| updated() |
| 组件DOM已经更新，组件更新完毕 页面和数据保持一致 注意：组件运行阶段的两个函数beforeupdate和update会根据数据改变又选择的触发 |
| beforeDestroy() |
| 解除绑定、销毁子组件、事件监听器 当执行beforeDestroy钩子函数时，vue实例就进入销毁阶段 当执行beforeDestroy时，实例所有的data和methods，以及过滤器、指令，都处于可用状态，此时还没有真正执行销毁过程 |
| destroy() |
| 组件已经被完全销毁，不可再用了 |
父子组件生命周期
父组件初始化完成才会初始化子组件；子组件渲染完，父组件才会完成渲染
Index created
List created
List mounted
Index mounted
Index before updated
List before updated
List updated
Index updated
说明： 此笔记部分来源于双越老师的慕课课程： https://coding.imooc.com/learn/list/419.html
