Vue 组件自定义事件(Vue component custom events)

通过 子组件给父组件传递数据 了解组件自定义事件

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>
————————

Understand component custom events by passing data from child components to parent components

Props implementation: transfer data from child to parent

< strong > parent component < / strong >

<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>

< strong > sub component < / strong >

<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>

Custom event implementation: pass data from child to parent

Two methods:

  • Use v-on or@
  • More flexible use (Ref)

< strong > parent component < / strong >

<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>

< strong > sub component < / strong >

<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>