如何在 vue js composition api 中将反应变量从子组件传递到父组件答案

【问题标题】：how to pass a reactive variable from child component to parent component in vue js composition api如何在 vue js composition api 中将反应变量从子组件传递到父组件
【发布时间】：2023-02-26 00:54:02
【问题描述】：

我有两个组件，一个是父组件，另一个是子组件，父组件在这个表单字段中有一个表单字段我可以添加额外的表单字段，这个额外的表单字段是在组件的帮助下添加的，表单字段在父组件中有它自己的反应变量，附加组件也有它自己的反应变量，所以当我要提交时，我需要捕获子组件中的反应变量详细信息，以便我可以将它作为一种形式传递给 api。

我在 youtube 上尝试了很多视频，大多数视频建议我使用 defineProps() 方法从父组件捕获数据到子组件，但是所有视频都没有给出如何从子组件捕获数据到父组件，我试过这个方法，如果它能反之亦然，但它没有。

【问题讨论】：

就像你说的，道具是从父母到孩子的一种方式。孩子对父母的等价物是发出一个事件。请参阅Vue docs on component events。如果您在实施时遇到问题，请在您的问题中包含您尝试的一些代码 sn-ps 以获得解决您遇到的任何问题的帮助！

标签： vue-component vuejs3 laravel-mix-vue3

【解决方案1】：

检查答案：

对于组件之间的数据共享，您可以使用自定义有状态存储对象或Pinia。

检查 Vue 文档

State Management

这是自定义有状态存储对象的一个非常基本的示例

const { createApp, ref, toRef, toRefs } = Vue;

const myStore = {
  counter: ref(0),
  add: function() {
    this.counter++ 
  }   
}

const template = 'counter = {{counter}}<br/>' 

const CompA = {
  setup() {
    const { counter } = myStore
    return  { counter }
  },
  template: template
}

const CompB = {
  setup() {
    const { counter } = myStore
    return  { counter }
  },
  template: template
}

const App = {
  components: { CompA, CompB },
  setup() {
    const { counter, add } = myStore
    return  { counter, add }
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
  CompA: <comp-a></comp-a>
  CompB: <comp-b></comp-b>
  App: counter = {{counter}}<br/>
  <button @click="add()">+1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

【讨论】：