Vue父子组件声明周期

最新推荐文章于 2024-03-08 06:57:59 发布

偷笑ing

最新推荐文章于 2024-03-08 06:57:59 发布

阅读量207

点赞数

分类专栏： javascript 文章标签： vue 生命周期

本文链接：https://blog.csdn.net/qq_38557202/article/details/82798656

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

记录下，避免忘了，还要做

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue</title>
	<script src="./vue/vue.js"></script>
	<script src="./vue/vue-router.min.js"></script>
	<style>
	</style>
</head>
<body>
	<div id="app">
		<span @click="childmsg = 'childnewsmsg'">{{ msg }}</span>
		<cpt-child :msg="childmsg"></cpt-child>
	</div>
</body>
<script>
var child = Vue.extend({
	template: '<div>cpt-child:{{ msg }}</div>',
	props: {
		msg: String
	},
	beforeCreate: function(){
		console.log('beforecreate parent')
	},	
	created: function(){
		console.log('created parent')
	},
	beforeMount: function(){
		console.log('beforeMount parent')
	},
	mounted: function(){
		console.log('mounted parent')
	},
	beforeUpdate: function(){
		console.log('beforeUpdate parent')
	},
	updated: function(){
		console.log('updated parent')
	},
	beforeDestroy: function(){
		console.log('beforeDestroy parent')
	},
	destroyed: function(){
		console.log('destroyed parent')
	}
})
var vm = new Vue({
	el: '#app',
	data: {
		msg: 'msg',
		childmsg: 'childmsg'
	},
	watch: {
		childmsg: function(newVal,oldVal){
			console.log('watch change') 
		}
	},
	components: {
		'cpt-child': child
	},
	beforeCreate: function(){
		console.log('beforecreate child')
	},	
	created: function(){
		console.log('created child')
	},
	beforeMount: function(){
		console.log('beforeMount child')
	},
	mounted: function(){
		console.log('mounted child')
	},
	beforeUpdate: function(){
		console.log('beforeUpdate child')
	},
	updated: function(){
		console.log('updated child')
	},
	beforeDestroy: function(){
		console.log('beforeDestroy child')
	},
	destroyed: function(){
		console.log('destroyed child')
	}	
})
</script>
</html>