Vue-父子组件间传值(props,自定义事件+$emit（）,ref)

1313亮晶晶~

已于 2023-02-09 19:06:32 修改

阅读量266

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端前端框架 Powered by 金山文档

于 2023-02-09 14:21:10 首次发布

本文链接：https://blog.csdn.net/weixin_45802287/article/details/128950839

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

主要是子组件给父组件传值

一、案例🌞

School.vue和Student.vue子组件要和父组件App之间产生数据交互

需求1：点击“把学校名给App”按钮将学校名传给App

实现：

APP.vue

（1）App里定义获取学校名的方法getSchoolName

methods：{
getSchoolName(name){
                console.log('App收到了学校名：',name)
            }
}

(2)通过在School组件标签里添加getSchoolName方法将该方法传递给School组件

<School :getSchoolName="getSchoolName"/>

School.vue

(3)School组件需要用props来接收这个方法类型的值

(4)按钮绑定sendSchoolname( )方法的click事件，methods里添加该方法用来发送name，同时调用props里接收来的getSchoolName( )方法来传参

<button @click="sendSchoolName">把学校名给App</button>
//...
export default {
        name:'School',
        props:['getSchoolName'],
        data() {
            return {
                name:'哈佛',
                address:'美国',
            }
        },
        methods: {
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        },
    }

需求2：点击“把学生名给App”按钮将学生名传给App

通过父组件给子组件绑定一个自定义事件实现

实现1：使用@或v-on

App.vue

(1)给Student组件的实例对象vc上绑定自定义事件atguigu,如果有人触发了该事件，getStudentName函数就会被调用。

<Student v-on:atguigu="getStudentName"/>

(2)在methods中配置getStudentName( )

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

Student.vue

(3)按钮绑定sendStudentname( )方法的click事件，methods里添加该方法，调用$emit( )方法触发事件。

<button @click="sendStudentlName">把学生名给App</button>
methods: {
            sendStudentlName(){
               //触发Student组件实例身上的atguigu事件，触发后sendStudentname()被调用，同时接收name
                this.$emit('atguigu',this.name，666)
                // this.$emit('demo')
                // this.$emit('click')
            }
}

实现 2：使用ref(更灵活）

App.vue

(1)在Student子组件标签里添加ref注册引用信息。通过this.$refs.student获取Student组件的实例对象。（里面的student相当于组件Student的id)

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

(2)添加生命周期钩子mounted()

mounted() {
            this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
            // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
        },

PS:ref属性：

1. 被用来给元素或子组件注册引用信息（id的替代者）

2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

3. 使用方式：

1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```

2. 获取：```this.$refs.xxx```