为什么用$parent 不用$emit
时间: 2023-08-26 11:08:40 浏览: 48
使用$parent和$emit都是为了实现子组件与父组件之间的通信,但它们的使用场景略有不同。
使用$parent是在子组件中直接调用父组件的方法或属性。这种方式适用于子组件需要主动触发父组件的某个方法或获取父组件的数据的情况。在引用[1]中的代码示例中,子组件通过this.$parent来调用父组件的getProductListFn()方法。
而使用$emit是在子组件中通过触发事件的方式向父组件传递数据或触发父组件的方法。这种方式适用于子组件需要向父组件传递数据或通知父组件进行某些操作的情况。在引用[2]和[3]中的代码示例中,子组件通过$emit来触发父组件的方法或传递数据。
所以,使用$parent和$emit的选择取决于具体的通信需求。如果是子组件主动调用父组件的方法或获取父组件的数据,可以使用$parent;如果是子组件向父组件传递数据或触发父组件的方法,可以使用$emit。
相关问题
$emit $parent
$emit是Vue.js中的一个方法,用于在子组件中向父组件触发自定义事件。通过调用$emit方法,子组件可以传递数据给父组件,从而实现组件间的通信。
$parent是Vue.js中的一个属性,用于在子组件中获取父组件的实例。通过$parent属性,子组件可以直接访问父组件的属性和方法。
举例来说,当子组件需要调用父组件的方法时,可以通过$parent来访问并调用:
```
// 子组件
export default {
methods: {
childClick() {
this.$parent.fatherMethod()
}
}
}
```
当父组件需要向子组件传递方法时,可以使用props将方法传递给子组件:
```
// 父组件
<template>
<div class="parent">
<child :fatherMethod='fatherMethod'></child>
</div>
</template>
<script>
import child from '../base/child'
export default {
components: {
child
},
methods: {
fatherMethod() {
alert('我是父组件的know方法');
}
}
}
</script>
```
vue3 使用$on $emit
根据提供的引用内容,Vue3中使用$on和$emit进行组件之间的通信方式与Vue2相同。具体使用方法如下:
1.在父组件中使用$emit触发事件,传递数据:
```javascript
// Parent.vue
<template>
<div>
<button @click="sendData">发送数据</button>
<Child @child-event="handleChildEvent"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
sendData() {
this.$emit('parent-event', '这是来自父组件的数据');
},
handleChildEvent(data) {
console.log(data);
}
}
}
</script>
```
2.在子组件中使用$on监听事件,接收数据:
```javascript
// Child.vue
<template>
<div>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('child-event', '这是来自子组件的数据');
}
},
mounted() {
this.$parent.$on('parent-event', (data) => {
console.log(data);
});
},
beforeUnmount() {
this.$parent.$off('parent-event');
}
}
</script>
```
在子组件中,我们使用$parent来访问父组件实例,然后使用$on来监听父组件触发的事件,并在beforeUnmount钩子函数中使用$off来移除事件监听器。