2016-10-17 103 views
4

漂亮的新听VUE这里JS,事件自定义事件,从组件

只是想知道是否有可能发出从主VUE实例(父)的自定义事件和组件可以听该自定义事件,并在事件触发时采取相应措施?

我想触发VUE例如自定义事件安装生命周期函数,那么所有的组件可以初始化自己。

ex。

主要VUE例如

new Vue({ 
    el : '#main-app', 
    mounted : function() { 
     this.$emit('init-app'); 
    } 
}); 

然后在各种组件,它可以监听“INIT-应用”自定义事件,然后采取相应的行动被触发或发射时。

不知道如何做到这一点因为jue事件监听器附加到html标签吗?事件监听器或组件中的某个函数是否可以通过仅从父项发出事件来触发?

注:我使用VUE JS 2.0.3 和我的组件是全球性的,他们没有内嵌

前。

Vue.component('my-component', { 
    template: '#component-template' 
}); 

我可以在稍后添加更多的组件。

在此先感谢。

+0

我想把每个组件的初始化代码放到组件本身,我不想把它们放在主vue实例上。 – Jplus2

+0

您是否按照文档中的说明使用$ on和$ emit? –

+0

我再次对vue js很新,你能给我一个关于如何根据我的问题实现我想要的东西的例子吗?不知道如何实现我想要的,显示一些代码示例是非常有用的。 – Jplus2

回答

4

初始化子组件的正确方法是对每个子组件使用created:生命周期钩子。

原因:当您从父组件发送您的init-app事件时,您的子组件很可能不会实例化。所以,它永远不会被初始化。

有关事件的其他注意事项:如果要将事件从子组件发送到父组件,则应该使用this.$parent.$emit("my-event-code"),并在父组件上将其作为this.$on("my-event-code")接收。最近在尝试各种方法几小时后我发现了它。

因此,如果您试图从父母之间发送init-app事件,您可能需要在子组件上收听this.$parent.$on("init-app", ...) - 我还没有验证过这一点,这是我目前的理解。

+0

感谢您的答案@Mani,您能否提供您的解决方案的代码示例?顺便说一句我已经更新了这个问题,我没有通知我的组件是全局组件,而不是内联到主vue实例。 – Jplus2

+1

@ Jplus2我没有意识到你的全局组件是彼此无关的。在这种情况下,您只有一个选项 - 按照此处所述创建一个**事件总线**:http://vuejs.org/guide/components。html#非父母子女通信 – Mani

+0

谢谢@Mani,您将我引导至解决方案,基本上vue组件的确有类似于vue实例的生命周期事件,因为我没有测试它,所以这很愚蠢。虽然文档没有明确提到组件具有生命周期钩子,但无论如何,我使用了* mounted *钩子,因为它在组件渲染后被触发。 – Jplus2