Question

我想$emit vue.js 2 const app = new Vue({ created: function(){ // here is some promise and after it done the below line runs this.$emit('foo', 'bar'); } });中所有子组件的一些数据，这是我的代码：

根组件

<template></template>
<script>
    export default {
        created: function() {
            this.$on('foo', function(data) {
                console.log(data);
            });
        }
    }
<script>

子组件

    # BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# Wordfence WAF
<IfModule mod_php5.c>
    php_value auto_prepend_file '/home/avis-communes/wordfence-waf.php'
</IfModule>
<Files ".user.ini">
<IfModule mod_authz_core.c>
    Require all denied
</IfModule>
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
</IfModule>
</Files>

# END Wordfence WAF

它不能正常工作。

有没有办法从根目录向所有子组件广播一些数据？

Answer 1

Vuejs是自下而上的方法，意味着首先编译子组件并要求this.$on，因此广播将无效$emit - $on

在子组件中使用props来监视根数据更改，在此示例中，child1和child2具有相同的根组件数据name

var child1 = Vue.extend({
    template: "<div>Child Component1 : Niklesh : {{name}} <div v-if='loading'>Loading...</div></div>",
    props: ['name','loading']
});
var child2 = Vue.extend({
    template: "<div>Child Component1 : Rishi : {{name}} <div v-if='loading'>Loading...</div></div>",
    props: ['name','loading']
});
var app = new Vue({
    el: "#vue-instance",
    data: {
        name: "...",
        loading: true
    },
    mounted() {
    		var vm =  this;
    		setTimeout(function() {
        	vm.name = "Raut";
          vm.loading = false;
				}, 1000);
    },
    components: {
        child1,
        child2
    },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
    <child1 :name="name" :loading="loading"></child1>
    <child2 :name="name" :loading="loading"></child2>
</div>

Answer 2

使用另一个Vue实例作为事件总线

Code Pen Sample

<div id="app">
  <child></child>
</div>

var bus = new Vue()

Vue.component('child', {
  data() {
    return {
      message: 'waiting for event...'
    }
  },
  template: '<div>{{ message }}</div>',
  created: function() {
    bus.$on('foo', data => {
      this.message = data;
    })
  }
})

var app = new Vue({
  el: '#app',
  created: function() {
    setTimeout(()=> {
      bus.$emit('foo', 'bar')
    }, 1000)
  }
})

如何从根Vue.js

2 个答案: