之前做了一篇父传子的笔记,需要的小伙伴可以去看看:
vue组件通信简明笔记:父传子
今天的笔记是,子传父通信。
1、 子传父:自定义事件($emit)
- 在Vue中,子组件向父组件传递数据可以通过自定义事件来实现。
示例:
<!-- 父组件 -->
<template>
<div>
<h1>{{ message }}</h1>
<child-component @childEvent="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
};
},
methods: {
handleChildEvent(data) {
this.message = data;
}
}
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<button @click="sendDataToParent">向父组件传递数据</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = 'Hello, Parent!';
this.$emit('childEvent', data);
}
}
};
</script>
- 父组件通过
@childEvent="handleChildEvent"
监听子组件触发的childEvent
事件。当子组件调用this.$emit('childEvent', data)
时,会将data
作为参数传递给父组件的handleChildEvent
方法。 - 父组件可以在
handleChildEvent
方法中接收数据并进行相应处理。在这个例子中,父组件将接收到的数据赋值给message,然后在模板中显示出来。 - 当在子组件中点击按钮时,就会向父组件传递数据,并在父组件中更新相应的状态。
2、子传父:$refs
父组件可以通过ref
属性引用子组件,直接访问子组件的属性和方法。这样可以实现子组件向父组件传递数据。
<!-- 父组件 -->
<template>
<div>
<h1>{{ message }}</h1>
<!-- 给子组件定义一个 ref 属性-->
<child-component ref="childRef"></child-component>
<button @click="getChildData">获取子组件数据</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
};
},
methods: {
getChildData() {
//拿到
const childData = this.$refs.childRef.data;
this.message = childData;
}
}
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<!-- 子组件的数据 -->
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
data() {
return {
data: 'Hello, Parent!'
};
}
};
</script>
- 父组件通过给子组件添加
ref="属性名"
属性来引用子组件。然后,在父组件的方法中,可以通过this.$refs.属性名
访问子组件的属性和方法。 - 在这个例子中,父组件通过
this.$refs.属性名.data
获取子组件的data属性,并将其赋值给message,然后在模板中显示出来。