<template> <header v-on:click="changetitle"> <h1>{{title1}}{{title}}</h1> </header> </template> <script> export default { name: 'app-header', props:{ title:{ type:String, } }, data(){ return { title1: 'Vue.js Demo' } }, components: { }, methods:{ changetitle:function () { //this.title='changed!' this.$emit('titlechanged','子向父组件传值') } }, beforeCreate() { alert('组件实例化之前执行的函数!') }, created() { alert('组件实例化完毕但是页面还未显示!') }, beforeMount() { alert('组件挂载前,页面仍未展示,但是虚拟dom已经配置!') }, mounted() { alert('组件挂载后,此方法执行后,页面显示!') }, beforeUpdate() { alert('组件更新前,页面仍未更新,但是虚拟dom已经配置!') }, updated() { alert('组件更新,此方法执行后,页面显示!') }, beforeDestroy() { alert('组件销毁前!') }, destroyed() { alert('组件销毁!') } } </script> <style scoped> header { background-color: lightgreen; padding: 10px; } h1 { color: #222 ; text-align: center; } </style>