You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.2 KiB
53 lines
1.2 KiB
2 years ago
|
<template>
|
||
|
|
<div class="student">
|
||
|
|
<h2>学生名称：{{ name }}</h2>
|
||
|
|
<h2>学生年龄：{{ age }}</h2>
|
||
|
|
<h2>当前序号：{{number}}</h2>
|
||
|
|
<button @click="sendStudentName">把学生名称传给App</button>
|
||
|
|
<button @click="unbind">解绑studentName事件</button>
|
||
|
|
<button @click="death">销毁当前Student组件的实例</button>
|
||
|
|
<button @click="num">number+1</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "Student",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
name: "小强",
|
||
|
|
age: 18,
|
||
|
|
number: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
sendStudentName() {
|
||
|
|
// 触发Student组件实例上的studentName事件
|
||
|
|
this.$emit("studentName", this.name, 666, 777, 888)
|
||
|
|
this.$emit("demo")
|
||
|
|
},
|
||
|
|
unbind() {
|
||
|
|
// this.$off("studentName") // 解绑单个自定义事件
|
||
|
|
this.$off(["studentName", "demo"]) // 解绑多个自定义事件
|
||
|
|
this.$off() // 解绑全部自定义事件
|
||
|
|
},
|
||
|
|
death() {
|
||
|
|
this.$destroy() // 销毁当前Student组件的实例
|
||
|
|
},
|
||
|
|
num() {
|
||
|
|
console.log("num被调用")
|
||
|
|
this.number++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
.student {
|
||
|
|
background-color: pink;
|
||
|
|
padding: 15px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|