对vue.js中this.$emit的深入理解

对于Vue.js中的this.$emit方法的深入理解，需要从Vue.js组件通信的机制以及this指向这两个方面来展开讲解。

一、Vue.js组件通信机制

在Vue.js中，组件之间的通信可以通过props和自定义事件来实现。

1. 通过props进行父子组件通信

父组件通过props向子组件传递数据，子组件可以接收到父组件传递进来的数据，并且在子组件中将父组件传递进来的数据绑定到子组件的data中，从而实现了父子组件之间的通信。

下面是一个父组件向子组件传递数据的示例：

//父组件
<template>
  <div>
    <h2>{{title}}</h2>
    <child :message="message"></child>
  </div>
</template>
<script>
import Child from './Child.vue'

export default {
  data() {
    return {
      title: '父子组件通信示例',
      message: 'Hello Vue.js!'
    }
  },
  components: {
    Child
  }
}
</script>

//子组件Child.vue
<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
}
</script>

2. 通过自定义事件进行子父组件通信

父组件通过自定义事件向子组件传递数据，子组件通过$emit方法触发自定义事件，从而向父组件通信。

下面是一个通过自定义事件实现子父组件通信的示例：

//父组件
<template>
  <div>
    <h2>{{title}}</h2>
    <<child @message="handleMessage"></child>
  </div>
</template>
<script>
import Child from './Child.vue'

export default {
  data() {
    return {
      title: '子父组件通信示例',
      message: ''
    }
  },
  components: {
    Child
  },
  methods: {
    handleMessage(msg) {
      this.message = `收到子组件传递的消息：${msg}`
      console.log(this.message)
    }
  }
}
</script>

//子组件Child.vue
<template>
  <div>
    <button @click="handleClick">向父组件传递消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello World!')
    }
  }
}
</script>

二、this指向问题

在Vue.js组件中，this指向的问题是比较常见的，在使用this.$emit方法的时候，需要注意this指向当前组件对象，而非全局对象。

下面是一个this指向问题的示例：

<template>
  <div>
    <h2>{{title}}</h2>
    <button @click="handleClick">向父组件传递消息</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'this指向示例'
    }
  },
  methods: {
    handleClick() {
      console.log(this.title)  // this指向当前组件对象，输出 ‘this指向示例’
      this.$emit('message', 'Hello World!')
    }
  }
}
</script>