vue 子传父 的几种方法_react子传父

vue 子传父 的几种方法_react子传父区别在代码中已标出 1.props方式 父组件内容 <template> <div class="app"> <h1>{{msg}}</h1> <! : 可替换为 v-bind: > <

vue

区别在代码中已标出

 

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>

 

今天的文章vue 子传父 的几种方法_react子传父分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/53899.html

(0)
编程小号编程小号
上一篇 2023-08-29 22:17
下一篇 2023-08-29

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注