vue里面的 emit

在Vue中，我们可以使用emit来实现组件之间的通信。使用emit可以将组件之间的数据传输进行解耦，使得组件之间可以独立地通信和交互。

Vue.component('child-component',{
  template: `
    {{ buttonText }}
  `,data() {
    return {
      buttonText: 'Click me!'
    }
  },methods: {
    handleClick() {
      this.$emit('buttonClicked',this.buttonText)
    }
  }
})

在上面的示例中，我们定义了一个子组件child-component，并使用了一个按钮作为模板。然后定义了一个data对象，包含一个buttonText属性和一个handleClick方法。

在handleClick方法中，我们使用了$emit方法来触发一个名为buttonClicked的事件，并将按钮文本作为参数传递。这个事件会被父组件监听，并可以通过监听函数来获取emit方法传递的参数。

Vue.component('parent-component',{
  template: `
    

      
{{ message }}
    
  `,data() {
    return {
      message: ''
    }
  },methods: {
    handleButtonClicked(buttonText) {
      this.message = `The button with text ${buttonText} was clicked.`
    }
  }
})

在上面的示例中，我们定义了一个父组件parent-component，并嵌套了子组件child-component。在子组件上使用了一个名为buttonClicked的事件监听器，并将监听函数handleButtonClicked绑定在了父组件上。

在handleButtonClicked函数中，我们获取了传递的文本内容，并将其作为消息展示在了父组件中。这就是利用emit实现的组件间通信的过程。

使用emit可以让我们更加方便地管理组件之间的交互，避免数据的复杂传递和重复定义。同时，emit也可以允许我们在父组件中动态地改变子组件中的数据并更新视图，提升了组件的灵活性和扩展性。