<template>
{{name}}
{{count}}
<h1 @click="clickmethods(1111)">点击</h1>
</template>
<script>
export default {
//组件名称
name: 'Name',
// 声明触发的事件
//emits: ['response'],
//定于组件
components: {
},
//接收上级组件传的值msg
props: {
msg: String
},
//数据定义
data() {
return {
name: '欢迎使用Vue模板',
count: 0
}
},
//方法集合
methods: {
clickmethods(clickname) {
console.log(clickname)
this.count += 1
}
},
beforeCreate() {
console.log("创建组件")
},
created() {
// 带参数触发 父组件的方法
//this.$emit('response', 'hello from child')
console.log("创建组件后")
},
beforeMount() {
console.log("进入组件")
},
beforeUpdate() {
console.log("Dom更新")
},
beforeUnmount() {
console.log("销毁组件")
},
watch: {
//监听count数据变化
count(newCount) {
// 没错，console.log() 是一个副作用（有点像是通知）
console.log(`new count is: ${newCount}`)
}
}
}
//动画使用：https://cn.vuejs.org/tutorial/#step-15
</script>
<style>
</style>
