如何从 vue 脚本中的另一个组件获取对象值？

Question

我的 PHP 文件中有 2 个 vue 组件：应用程序和 vn 组件。 我想从 vn 组件中获取 {{obj.vacancies_left}} 并在应用程序组件中调用它。 我该怎么做？ 我不断收到未定义的变量。 我尝试通过 getElementById 获取它，但它显示了未定义的变量。

应用程序 vue 组件

var application = new Vue({
    el: '#engineerlist',
    data: {
        engineer: [],
        allData: '',
        actionButton:'Enrol',
        courseID: '',
    },
    methods:{
        decreaseVacancy:function() {
            axios.post('http://localhost/admin/decreaseVacancies.php',{
                action:'delete',
                CourseID: '101'

            }).then(function(response){
                var vacancy = document.getElementById("vacanciesleft").value;
                console.log(vacancy);
                alert(response.data.status);

            }).catch(function(error) {
                console.log(error);
            });
            
        }
    } 
});

vn vue 组件

var vn= new Vue({
    el: '#courseInfo',
    data: {
        courses: []
    },
    created: function() {
        axios.get('http://localhost/SPM-Group-3/admin/getSoftware.php')
        .then(response => {
                return_objs = response.data
                for (obj of return_objs) {
                    this.courses.push(obj)
                }
            })
            .catch(error => {
                this.courses = [{ value: 'There was an error: ' + error.message }]
            })
    }
});

这是我想在应用程序 vue 组件 reduceVacancy 函数中检索的 {{obj.vacancies_left}}

<div v-for="obj in courses" v-bind:value="obj">
    <h2 class="title">{{obj.courseID}}</h2>
    <h3 class="title">{{obj.courseName}}</h3>
    <p class="text">{{obj.description}}</p>
    <b>Total vacancies: </b> {{obj.vacancies}}<br>
    <b ref="vacanciesleft">Number of vacancies left: </b> <span id="vacanciesleft">{{obj.vacancies_left}}</span>
</div>

Answer 1

跨 Vue 组件共享数据。

• 父母 -> 孩子。 要将数据从 Parent 传递给 Child，您可以使用Props ，
• 孩子 -> 父母。 要将数据从 Child 传递给 Parent，您可以使用带有$emit('my-event') 。 请参阅监听子组件事件
• 不相关的组件也可以使用事件总线与 this.$root.$emit 共享数据。

如果使用Vuex ，我会说这是在不相关的组件之间共享数据的最佳方式。