Vue 组件自定义事件_绑定
通过 子组件给父组件传递数据 了解组件自定义事件
props 实现:子给父传递数据
父组件
<template>
<div class="app">
<h2>{{msg}}</h2>
<!-- 通过父组件给子组件传递函数类型的 props 实现:子给父传递数据 -->
<my-school :getSchoolName="getSchoolName"/>
</div>
</template>
<script>
import MySchool from "@/components/MySchool";
export default {
name: 'App',
components: {MySchool},
data() {
return {
msg: '你好'
}
},
methods: {
getSchoolName(name) {
console.log('App 收到学校名称:', name)
}
}
}
</script>
子组件
<template>
<div class="school">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="sendSchoolName">把学校名给 App</button>
</div>
</template>
<script>
export default {
name: "MySchool",
props: ['getSchoolName'],
data() {
return {
name: 'ABC',
address: '长沙'
}
},
methods: {
sendSchoolName() {
this.getSchoolName(this.name)
}
}
}
</script>
<style scoped>
.school {
background-color: #9ebbfc;
padding: 5px;
}
</style>
自定义事件实现:子给父传递数据
两种方法:
- 使用 v-on 或 @
- 使用 ref(更灵活)
父组件
<template>
<div class="app">
<h2>{{msg}}</h2>
<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据 -->
<!-- 第一种写法:使用 v-on 或 @ -->
<!-- <my-student v-on:hellodemo="getStudentName"/> -->
<my-student @hellodemo="getStudentName"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据 -->
<!-- 第二种写法(更灵活):使用 ref -->
<!-- <my-student ref="MyStudent"/> -->
</div>
</template>
<script>
import MyStudent from "@/components/MyStudent";
export default {
name: 'App',
components: {MyStudent},
data() {
return {
msg: '你好'
}
},
methods: {
getStudentName(name) {
console.log('App 收到学生名称:', name)
}
},
// 第二种方法
// mounted() {
// this.$refs.MyStudent.$on('hellodemo', this.getStudentName)
// }
}
</script>
子组件
<template>
<div class="student">
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
<button @click="sendStudentName">把学生名给 App</button>
</div>
</template>
<script>
export default {
name: "MyStudent",
data(){
return {
name:'张三',
age:19
}
},
methods:{
sendStudentName(){
this.$emit('hellodemo',this.name)
}
}
}
</script>