Vue 子组件向父组件传值

 1、使用自定义事件 ($emit)

这是Vue中最常用的子组件向父组件传递数据的方式。子组件通过触发一个自定义事件，并附加数据作为参数，父组件则监听这个事件并处理传递过来的数据。

子组件 (发送数据)：

<template><button @click="sendData">发送数据给父组件</button>
</template><script>
export default {methods: {sendData() {// 触发一个名为'dataSent'的自定义事件，并传递数据this.$emit('dataSent', { key: 'value' });}}
}
</script>

父组件 (接收数据)：

<template><child-component @dataSent="handleDataFromChild"></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleDataFromChild(data) {console.log('从子组件接收到的数据:', data);}}
}
</script>

2、

使用ref直接访问子组件方法或属性

虽然这种方法不鼓励频繁使用，因为可能破坏组件的封装性，但在某些情况下，直接通过ref访问子组件的方法或属性也是可行的。

子组件 (提供数据访问方法)：

<script>
export default {methods: {getDataForParent() {return { info: '这里是子组件的数据' };}}
}
</script>

父组件 (通过ref获取数据)：

<template><child-component ref="childRef"></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {fetchChildData() {// 通过ref调用子组件的getDataForParent方法const data = this.$refs.childRef.getDataForParent();console.log('从子组件获取的数据:', data);}},mounted() {this.fetchChildData(); // 页面加载时获取数据}
}
</script>