简介
Vue.js 是一款流行的 JavaScript 前端框架，它提供了多种功能和工具，以帮助开发人员构建高效、灵活和易于维护的 web 应用程序。其中，$emit、$on、$parent 和 $children 是 Vue.js 中常用的四个 API，它们可以帮助我们实现组件之间的通信和数据传递。
本文将详细介绍这四个 API 的使用方法和注意事项，以帮助读者更好地理解 Vue.js 的组件通信机制。
$emit
$emit 是 Vue.js 中用于触发自定义事件的 API，它可以将数据从子组件传递到父组件。使用 $emit 的方法很简单，只需要在子组件中定义一个自定义事件，并在需要传递数据的时候调用 $emit 方法即可。
下面是一个简单的示例代码：
// javascriptcn.com 代码示例
<!-- 父组件 -->
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(data) {
console.log(data)
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<button @click="emitCustomEvent">传递数据</button>
</div>
</template>
<script>
export default {
methods: {
emitCustomEvent() {
this.$emit('custom-event', 'Hello, world!')
}
}
}
</script>在上面的代码中，我们定义了一个名为 custom-event 的自定义事件，并在子组件的 emitCustomEvent 方法中调用了 $emit 方法来触发这个事件。在父组件中，我们通过 @custom-event 监听这个事件，并在 handleCustomEvent 方法中打印出传递的数据。
需要注意的是，$emit 方法只能触发当前组件的自定义事件，如果需要触发父组件或祖先组件的事件，可以使用 $parent 或 $root 属性。
$on
$on 是 Vue.js 中用于监听自定义事件的 API，它可以将数据从父组件传递到子组件。使用 $on 的方法也很简单，只需要在子组件中调用 $on 方法，并传入需要监听的事件名称和回调函数即可。
下面是一个简单的示例代码：
// javascriptcn.com 代码示例
<!-- 父组件 -->
<template>
<div>
<button @click="handleClick">传递数据</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('custom-event', 'Hello, world!')
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
this.$parent.$on('custom-event', this.handleCustomEvent)
},
beforeDestroy() {
this.$parent.$off('custom-event', this.handleCustomEvent)
},
methods: {
handleCustomEvent(data) {
this.message = data
}
}
}
</script>在上面的代码中，我们在子组件的 mounted 钩子函数中调用了 $on 方法，监听了父组件中名为 custom-event 的自定义事件，并传入了一个回调函数来处理传递的数据。在 beforeDestroy 钩子函数中，我们还需要调用 $off 方法来取消监听，以避免内存泄漏。
需要注意的是，$on 方法只能监听父组件或祖先组件的自定义事件，如果需要监听子组件的事件，可以使用 $children 属性。
$parent
$parent 是 Vue.js 中用于访问父组件实例的 API，它可以在子组件中访问父组件的属性和方法。使用 $parent 的方法也很简单，只需要在子组件中调用 $parent 属性即可。
下面是一个简单的示例代码：
// javascriptcn.com 代码示例
<!-- 父组件 -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<button @click="handleClick">修改父组件数据</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$parent.message = 'Hello, Vue.js!'
}
}
}
</script>在上面的代码中，我们在子组件中调用了 $parent 属性，并修改了父组件中的 message 数据。需要注意的是，$parent 属性只能访问直接父组件的实例，如果需要访问更高层次的父组件，可以使用 $root 属性。
$children
$children 是 Vue.js 中用于访问子组件实例的 API，它可以在父组件中访问子组件的属性和方法。使用 $children 的方法也很简单，只需要在父组件中调用 $children 属性即可。
下面是一个简单的示例代码：
// javascriptcn.com 代码示例
<!-- 父组件 -->
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
mounted() {
console.log(this.$children[0].message)
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
}
}
</script>在上面的代码中，我们在父组件的 mounted 钩子函数中调用了 $children 属性，并访问了子组件的 message 数据。需要注意的是，$children 属性只能访问直接子组件的实例，如果需要访问更深层次的子组件，可以使用 $refs 属性。
总结
$emit、$on、$parent 和 $children 是 Vue.js 中常用的四个 API，它们可以帮助我们实现组件之间的通信和数据传递。在使用这些 API 的时候，我们需要注意以下几点：
- $emit 方法只能触发当前组件的自定义事件，如果需要触发父组件或祖先组件的事件，可以使用 $parent 或 $root 属性。
- $on 方法只能监听父组件或祖先组件的自定义事件，如果需要监听子组件的事件，可以使用 $children 属性。
- $parent 属性只能访问直接父组件的实例，如果需要访问更高层次的父组件，可以使用 $root 属性。
- $children 属性只能访问直接子组件的实例，如果需要访问更深层次的子组件，可以使用 $refs 属性。
希望本文能够帮助读者更好地理解 Vue.js 的组件通信机制，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6575b31ad2f5e1655def8d5f