我有一个父组件，在 data() 中我想从子组件传递一个计算属性。
// ParentComponent.vue
<template>
<div>
<ChildComponent :parent="parent"/>
</div>
</template>
<script>
import ChildComponent from '@/components/ChildComponent';
export default {
name: 'ParentComponent',
components: {
ChildComponent,
},
data() {
return {
parent: {
parentData: '',
}
};
},
</script>
在子组件中，计算属性是字符串的串联，子组件的数据属性的字段。
<template>
<div>
<div class="control">
<input
v-model="salarySumm"
class="input"
type="text"
placeholder="Add the estimated salary (1000 - 2000)"
>
<div class="select">
<select v-model="salaryCode">
<option disabled value>Select currency</option>
<option
v-for="(el, index) in currency"
:key="index"
:value="el.code"
>{{ el.title }}</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: ['parent'],
data() {
return {
salarySumm: '',
salaryCode: '',
}
},
created() {
// Тут я получаю массив объектов в виде
// [{ title: 'string', code: 'string' }]
this.$store.dispatch('getCurrencies')
},
computed: {
currency() {
let list = this.$store.getters.currencies.data
const currencyList = []
if (list !== undefined) {
for (const el of list) {
if (el.code == '(none)' || el.code == null) el.code = ''
if (el.name !== null) {
currencyList.push({ title: `${el.name} | ${el.code}`, code: el.code })
}
}
}
return currencyList
},
salary() {
// Здесь я получаю строку в том виде, в котором хочу передать ее в родительский компонент.
return this.salarySumm + ' ' + this.salaryCode
},
</script>
如何将计算的属性薪水传递给父组件，更具体地说是 parent.parentData？
