Vue父组件调用子组件的方法emit和on
Vue.js是一种用于构建用户界面的JavaScript框架，它使用组件化的方式来构建应用程序。在Vue中，父组件可以通过触发事件并传递数据的方式与子组件进行通信。emit和on就是Vue中用于实现父组件调用子组件的通信机制。什么是emit和on
在Vue中，父组件可以通过在子组件上使用v-on指令来监听子组件触发的事件。子组件通过在方法中使用this.$emit()方法触发事件，并传递需要传递的数据。 例如，父组件可以这样监听子组件触发的事件：
在子组件中，通过this.$emit()方法触发custom-event事件：
如何在父组件中响应子组件的事件
当子组件触发事件时，父组件中定义的方法将被调用。在上面的例子中，当子组件调用this.$emit()方法触发custom-event事件时，父组件中定义的handleEvent方法将被调用。 例如，以下是父组件中定义的方法：
当子组件触发custom-event事件时，handleEvent方法将接收到子组件传递过来的数据（在此例中是"Hello from child component"），并将其打印到控制台上。
父组件向子组件传递数据
除了父组件调用子组件的方法外，父组件还可以通过将数据作为props传递给子组件来与子组件进行通信。 例如，父组件可以这样向子组件传递数据：
在子组件中，可以通过props接收来自父组件的数据：
{{ customProp }}
在上面的例子中，子组件将会渲染出"Hello from parent component"。
总结
通过使用emit和on机制，父组件可以与子组件进行通信，实现数据的传递和方法的调用。父组件通过监听子组件触发的事件，响应子组件的操作。同时，父组件还可以通过props将数据传递给子组件。这样的通信机制使得在Vue应用程序中的不同组件之间可以进行灵活的交互和数据共享。转载声明：本站发布文章及版权归原作者所有，转载本站文章请注明文章来源！
