VUE2 父组件怎么向子组件广播事件 ?$broadcast还能用吗?

发布于 2022-09-12 04:02:09 字数 42 浏览 16 评论 0

VUE2 父组件怎么向子组件广播事件 ?$broadcast还能用吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

不及他 2022-09-19 04:02:09

$broadcast已经废弃了
凡是事件都可以用新的事件系统($on(eventName) & $emit(eventName))来代替
官方同时推荐使用vuex之类应用状态管理方案

但如果只是父子间需要经由事件触发通信
完全可以在父组件的事件回调中用refs调用子组件的方法

好倦 2022-09-19 04:02:09

已经被移除,
详情见vue2文档
http://cn.vuejs.org/v2/guide/...和-broadcast-替换

离旧人 2022-09-19 04:02:09

可以通过子组件的$emit()通知父组件,父组件监听然后在作出操作,比如:

子组件:
this.$emit('loadData')

父组件:
<state @loadData="getItems"></state>

恩,大概就是这个样子了

天气好吗我好吗 2022-09-19 04:02:09

可以用Bus啊~

// bus.js
import Vue from 'vue'
export default new Vue()
// Parent.vue
import Bus from '../bus'
...
export default{
    data(){
        return {
            getVal:''
        }
    },
    mounted(){
        Bus.$on(val=>{
            this.getVal = val
        })
    },
    watch:{
        getVal(val){
            if(val){
                //do something...
            }
        }
    }
}
// Child.js
import Bus from '../bus'
...
export default{
    data(){
        return {}
    },
    mounted(){
        Bus.$emit('getVal','balabalabala...')
    }
幻梦 2022-09-19 04:02:09

使用$refs直接调用
大概这样

子组件sub.vue
<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'sub',
  methods: {
    log() {
      console.log(1111111);
    },
  },
};
</script>

父组件 index.vue
<template>
  <div>
  <sub ref="aaa"></sub>
  </div>
</template>

<script>

import sub from '../components/sub';

export default {
  name: 'index',
  components: {
    sub,
  },
  mounted() {
    this.$refs.aaa.log();
  },
};
</script>

<style>
</style>
空‖城人不在 2022-09-19 04:02:09

不知道作者出于什么目的把这功能删除了,实际上是有不少场景需要这个:
如:
子组件比较多,但同时要通过父组件调用一下子组件的重置(画面手输的项目),但又不确实子组件有几层,是不是用这种“broadcast”事件好一些?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文