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.
64 lines
1.7 KiB
64 lines
1.7 KiB
2 years ago
|
<template>
|
||
|
|
<div class="app">
|
||
|
|
<h1>{{ msg }}{{stuName}}</h1>
|
||
|
|
<!-- 通过父组件给子组件传递函数，间接获取子组件数据 -->
|
||
|
|
<School :getSchoolName="getSchoolName"/>
|
||
|
|
<!-- 通过父组件给子组件绑定一个自定义事件，实现给父传递数据，使用v-on或@方式 -->
|
||
|
|
<!-- <Student v-on:studentName="getStudentName"/>-->
|
||
|
|
<Student @studentName="getStudentName" @demo="method1" @click.native="show"/>
|
||
|
|
<!-- <Student @studentName.once="getStudentName"/>-->
|
||
|
|
<!-- 通过父组件给子组件绑定一个自定义事件，实现给父传递数据,使用ref方式 -->
|
||
|
|
<!-- <Student ref="student"/>-->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import School from "./components/School.vue";
|
||
|
|
import Student from "./components/Student.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "App",
|
||
|
|
components: {
|
||
|
|
School,
|
||
|
|
Student
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
msg: "Hello:",
|
||
|
|
stuName: ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getSchoolName(schoolName) {
|
||
|
|
console.log("获取学校名称", schoolName)
|
||
|
|
},
|
||
|
|
getStudentName(name, ...params) {
|
||
|
|
console.log("getStudentName", name, params)
|
||
|
|
this.stuName = name
|
||
|
|
},
|
||
|
|
method1() {
|
||
|
|
console.log("demo自定义事件被调用！")
|
||
|
|
},
|
||
|
|
show() {
|
||
|
|
alert("组件点击事件")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 正常写法
|
||
|
|
// this.$refs.student.$on("studentName", this.getStudentName)
|
||
|
|
// 可以设置只执行一次
|
||
|
|
// 可以加延时
|
||
|
|
// this.$refs.student.$once("studentName", this.getStudentName)
|
||
|
|
// setInterval(() => {
|
||
|
|
// this.$refs.student.$on("studentName", this.getStudentName)
|
||
|
|
// }, 3000)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.app {
|
||
|
|
background-color: gray;
|
||
|
|
padding: 15px
|
||
|
|
}
|
||
|
|
</style>
|