Vue学习：组件自定义事件（this指向）（原生事件）

最新推荐文章于 2024-08-17 11:16:36 发布

¡Venceremo

最新推荐文章于 2024-08-17 11:16:36 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129208246

Vue 专栏收录该内容

155 篇文章

订阅专栏

本文介绍了在Vue.js中，如何使用v-on指令和ref属性进行父子组件之间的通信。通过v-on可以监听并处理子组件触发的自定义事件，而ref则能获取到组件实例，直接调用其方法。文章还讨论了箭头函数中this的指向问题以及如何处理原生事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APP收到信息，需要在页面展示

v-on的方式

  this.studentName=name

<template>
    <div class="app">
        <h1>{{msg}},APP收到的学生姓名是:{{studentName}}</h1>
        <!-- : 传递的就变成了表达式-->
        <!-- Student组件实例对象 绑定了mything事件  mything触发实现的回调函数demo -->
        <!-- 通过父组件给子组件绑定自定义事件实现：v-on子给父传递数据 -->
           <Student v-on:mything="getStudentName"/>
            <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
            <School :getSchoolName="getSchoolName"/>
           
            </div>
        </template>

        <script>
    //引入<School/>组件
    import Student from './components/Student'
    import School from './components/School'
    export default {
        name: 'App',
        data() {
            return {
                msg:'你好',
                studentName:''
            }
        },
        //注册组件
        components: { 
            Student,
            School 
        },
        methods: {
            getSchoolName(name){
                console.log('APP收到了学校名',name)
            },
            getStudentName(name,...a){
                console.log('APP收到了学生名',name,a)
                this.studentName=name
            },

        },
    

     

    };
</script>
        <style>
    .app{
        background-color: #bfa;
        padding: 5px;
    }
</style>

ref的方式

  <Student ref="student"/>


 mounted() {
          //收到了组件实例对象 this.$refs.student
          this.$refs.student.$on('mything',this.getStudentName)
}

    getStudentName(name,...a){
                console.log('APP收到了学生名',name,a)
                this.studentName=name
            },

但是这里有一个注意事项

   this.$refs.student.$on('mything',function(...args) {
            console.log(this)
            
        })

this是student组件实例，谁触发 this是谁

this是vc了箭头函数没有自己的this ,所以指向了app

          this.$refs.student.$on('mything',(...args)=>{
            console.log(args)
            console.log(this)//vc
            this.studentName=args[0]

          })

前面都是给组件绑定自定义事件，现在是原生事件

    <Student ref="student" @click="show"/>

这种写法变成了自定义事件需要一个修饰符native

     <Student ref="student" @click.native="show"/>