vue 子传父的几种方法_react子传父「建议收藏」

老牧童 • 2023-10-11 09:33 • Vue • 阅读 102

大家好，欢迎来到IT知识分享网。

区别在代码中已标出

1.props方式

父组件内容

<template>
    <div class="app">
        <h1>{{msg}}</h1>
　　　　　<!-- ： 可替换为 v-bind: -->
        <CustomSchool :childEvent="getSchoolName"/>

    </div>
</template>
<script>
// 引入子组件
import CustomSchool from '@/components/3Custom/CustomSchool.vue'

export default {
    components: { CustomSchool},
    data() {
        return {
            msg: '你好啊!'
        }
    },
    methods:{
        getSchoolName(data){
            this.msg = data
        }
    }
}
</script>

子组件内容

<template>
    <div class="school">
        <div>
            学校名称：{{name}}</div>
        <div>
            学校地址：{{address}}
        </div>
        <button @click="sendSchoolName">把学校名发送给父组件</button>
    </div>

</template>
<script>

export default {
    props:['childEvent'],

    data() {
        return {
            name: 'rxy',
            address: '北京'
        }
    },
    methods:{
        sendSchoolName(){
          this.childEvent(this.name)

        }
    }
}
</script>

2.this.$emit方式(绑定自定义事件)

父组件内容

<template>
    <div class="app">
        <h1>{{msg}} </h1>

　　　　　　<!– @ 可替换为 v-on: –>

        <CustomSchool @childEvent="getSchoolName"/>
    </div>
</template>
<script>
import CustomSchool from '@/components/3Custom/CustomSchool.vue'

export default {
    components: { CustomSchool},
    data() {
        return {
            msg: '你好啊'
        }
    },
    methods:{
        getSchoolName(data){
            this.msg = data
        }
    }
}
</script>

子组件内容

<template>
    <div class="school">
        <div>
            学校名称：{{name}}</div>
        <div>
            学校地址：{{address}}
        </div>
        <button @click="sendSchoolName">把学校名发送给App</button>

　　　　　　<button
@click=”unbind”>解绑自定义事件</button>

    </div>

</template>
<script>

export default {
    data() {
        return {
            name: 'rxy',
            address: '北京'
        }
    },
    methods:{
        sendSchoolName(){
       　　 this.$emit('childEvent',this.name)
        }，

　　　　
　unbind() {

　　　　　　　　// this.$off(‘childEvent’) //适用于解绑单个事件

// this.$off([‘childEvent
‘, ‘demo’]) //解绑多个自定义事件

this.$off() //解绑所有自定义事件

　}，

    }
}
</script>

3.使用eventBus(更灵活) 例：可用定时器

父组件内容，通过ref方式获取

<template>
    <div class="app">
        <h1>
            {{msg}}
        </h1>
        <CustomSchool ref="school" />
    </div>
</template>
<script>
import CustomSchool from '@/components/3Custom/CustomSchool.vue'

export default {
    components: { CustomSchool},
    data() {
        return {
            msg: '你好啊'
        }
    },
    mounted() {
        setTimeout(() => {
            this.$refs.school.$on('schoolEvent', e => {
                this.msg = e })
        }, 3000)

　　　　// this.$refs.student.$on('studentEvent',this.getSchoolName)  //两种方式都可以

 }, methods: {
　　　 　getSchoolName(data) {

this.msg = data

　　} } </script>

子组件内容

<template>
    <div class="school">
        <div>
            学校名称：{{name}}</div>
        <div>
            学校地址：{{address}}
        </div>
        <button @click="sendSchoolName">把学校名发送给App</button>
    </div>

</template>
<script>

export default {
    data() {
        return {
            name: 'rxy',
            address: '北京'
        }
    },
    methods: {
        sendSchoolName() {
            this.$emit('schoolEvent',this.name)
        }
    }
}
</script>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29926.html

vue 子传父 的几种方法_react子传父「建议收藏」

相关推荐

发表回复

vue 子传父的几种方法_react子传父「建议收藏」