How to call methods between Vue components

Vue is a popular JavaScript framework that is widely used when developing web applications. It provides many useful features such as data binding, componentization, and routing, making it a powerful tool. Components in Vue are reusable parts of code. In this article, we will discuss how to call methods between Vue components.

In Vue, components can contain child components, which can communicate and interact with parent components. For example, we can define a parent component and then contain multiple subcomponents within it. These subcomponents can call methods on each other, so that more complex functions can be implemented. Here is a simple example:

// 定义一个子组件
Vue.component('child-component', {
  template: '<div><button @click="onClick">点击我</button></div>',
  methods: {
    onClick: function() {
      this.$emit('child-clicked')
    }
  }
})

// 定义一个父组件
new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onChildClicked: function() {
      this.message = '子组件被点击了'
    }
  }
})

In this example, we define a child component child-component, which contains a button that fires itself when the button is clicked The onClick method and sends an event. In the onClick method, we use $emit to send the child-clicked event. Next, in the parent component, we define a onChildClicked method to handle this event. In the onChildClicked method, we simply assign a string to the message property.

Now we can include the child component in the parent component and set up a listener. This listener listens for the child-clicked event. If the event is triggered, onChildClicked will be executed. method, here we just change the value of message, we can actually perform more complex logic here.

<div id="app">
  <child-component @child-clicked="onChildClicked"></child-component>
  <p>{{ message }}</p>
</div>

Here, we use the child component in the template of the parent component and add a listener to listen to the child-clicked event and execute the onChildClicked method .

In summary, Vue components are very useful tools because they help you break your code into reusable parts and allow you to have better control over each component. $emit and @ listeners are very useful when calling methods between components, as they allow you to easily pass data and trigger events between parent and child components .

The above is the detailed content of How to call methods between Vue components. For more information, please follow other related articles on the PHP Chinese website!