56 组件通信和生命周期

组件之间可能会进行数据传递

父子组件通信

父传子

使用 props 传递

<div id="#app">
    <father></father>
</div>

Vue.component("father", {
    template:`<div>
		<h4>父级</h4>
		<son msg="message"></son>
	</div>`,
    components: {
        son: {
            template: `<div>
				<h5>子级</h5>
				<p>{{ msg }}</p>
			</div>`,
        },
        props: {
            msg: {
                type: String,
            }
        }
    },
    data() {
        return {
            message: "父级数据"
        }
    },
})
new Vue({
	el: "#app"
})

子传父

利用自定义事件。父组件中使用子组件实例时，通常在标签中绑定（ v-on ）自定义的事件，在子组件中需要传递数据时，触发（ $emit（） ）在父组件中绑定的事件并传递数据即可

<div id="#app">
    <father></father>
</div>

Vue.component("father", {
    template:`<div>
		<h4>父级</h4>
		<son @father="son"></son>
		<p>{{ message }}</p>
	</div>`,
    components: {
        son: {
            template: `<div>
				<h5 @click="handle">子级</h5>
			</div>`,
        },
        data() {
            return {
                message: "子级数据"
            }
        },
        methods: {
            handle() {
                this.$emit("father", this.message)
            }
        }
    },
    data() {
        return {
            message: "父级数据"
        }
    },
    methods: {
        son(data) {
            this.message = data
        }
    }
})
new Vue({
	el: "#app"
})

跨组件层级通信

转换为父子组件通信的方式

event-bus （事件总线）：创建一个空间的 Vue 实例，借助其 $on() 方法绑定事件， $emit() 方法触发事件。在需要接收数据的组件中绑定自定义事件，在需要发送数据的组件中触发对应的自定义事件

<div id="#app">
    <father></father>
</div>

const bus = new Vue()
Vue.component("father", {
    template:`<div>
		<h4 @click="father">父级</h4>
		<son></son>
		<p>{{ message }}</p>
	</div>`,
    components: {
        son: {
            template: `<div>
				<h5 @click="son">子级</h5>
			</div>`,
        },
        data() {
            return {
                message: "子级数据"
            }
        },
        methods: {
            son() {
                bus.$emit("toFather", this.message)
            }
        }
    },
    data() {
        return {
            message: "父级数据"
        }
    },
    methods: {
        father() {
            bus.$on("toFather", handle)
        },
        handle(data) {
            this.message = data
        }
    }
})
new Vue({
	el: "#app"
})

生命周期

指的是组件从开始创建到最终销毁所经历的整个过程

生命周期钩子函数：是在生命周期中添加的一些函数，这些函数可以让开发者加入自己额外的逻辑

create 阶段

beforeCreate()

created()：在实例创建完成后被立即同步调用，这时可以获取到选项中的 data 数据进行处理

mount 阶段

beforeMount()

mounted()：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了

update 阶段

beforeUpdate()

updated()

destroy阶段

通常在销毁阶段，会销毁的资源：已启动的定时器、未完成的网络请求、手动绑定的事件、释放 socket 连接等…

beforeDestroy()

el被新创建的vm.$el` 替换了

update 阶段

beforeUpdate()

updated()

destroy阶段

通常在销毁阶段，会销毁的资源：已启动的定时器、未完成的网络请求、手动绑定的事件、释放 socket 连接等…

beforeDestroy()

destroyed()