我有两个组件，一个是父组件，另一个是子组件，父组件有一个表单字段，在这个表单字段中我可以添加其他表单字段，这个附加表单字段是在组件（表单字段）的帮助下添加的父组件中有自己的反应变量，附加组件也有自己的反应变量，因此当我要提交时，我需要捕获子组件中的反应变量详细信息，以便我可以将其作为表单传递给 api。
我已经尝试了 youtube 上的很多视频，大多数视频建议我使用 DefineProps() 方法来捕获从父组件到子组件的数据，但所有视频都没有给出如何从子组件捕获到父组件的数据，我尝试了该方法是否有效，反之亦然，但没有。
检查答案：
- VUE.JS 3 更改一个同级组件与另一个组件的布尔值
- Vue 组件之间传递变量
对于组件之间的数据共享，您可以使用自定义有状态存储对象或Pinia.
检查 Vue 文档
这是自定义有状态存储对象的一个非常基本的示例
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
