目录
  • 总结
<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的更多内容!