目录
- 总结
<template> <div > <h2>{{msg}}</h2> <!-- 通过父组件给子组件传递函数类型的数据props实现:子给父传递数据 --> <school :getname="getname"/> <student :getstudentname="getstudentname"/> <!-- 通过父组件给子组件绑定一个自定义事件:实现子给父传递数据 --> <age v-on:eldersex="demo"/> <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法:使用ref) --> <!-- <student ref="student"/> --> </div> </template> <script> import school from './components/school.vue' import student from './components/student.vue' import age from './components/age.vue' export default { name:'app', components:{ school,student ,age}, data(){ return { msg:'你好,世界!' } }, methods:{ getname(name){ console.log('app收到了名字',name); }, getstudentname(name1){ console.log('接收到了学生的姓名',name1); }, demo(sex1){ console.log( 'demo被调用了',sex1); } }, // mounted() { //绑定自定义事件 // this.$refs.student.$on('eldersex',this.schoolage) //绑定自定义事件(一次性) // this.$refs.student.$once('eldersex',this.schoolage) // }, } </script> <style scoped> </style>
<template> <div class="demo"> <h2>学生姓名:{{name}}</h2> <h2>学生年龄:{{age}}</h2> <button @click="sendstudentname">把学生的名字给app</button> </div> </template> <script> export default { name: 'student', props: ['getstudentname'], data() { return { name: '张三', age: 19 } }, methods: { sendstudentname() { this.getstudentname(this.name) } } } </script> <style> .demo { background-color: skyblue; } </style>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注www.887551.com的更多内容!
黄山市民网:https://www.huangshanshimin.com/