我在子组件中有数据props .在挂载功能的子组件内部,我需要从props 中获取特定值,并设置 Select 下拉值.我正在使用vue multiselect插件,它运行良好.这是代码.

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      


        Vue.nextTick(function () {      
        // I want to access props here but it return 0 length array 
            console.log(vm.$parent.Subscriptions);
        });
    },  
    beforeUpdate() {
        let vm = this;
        console.log(vm.$parent.Subscriptions);
    },
//  updated() {
//      let vm = this;
//      console.log(vm.$parent.Subscriptions);
//  }
};

现在,我唯一一次获得订阅是在beforeUpdate和Update函数中,但每次值发生变化时都会调用这个函数,这不是必需的.我只需要第一次更改它,就可以设置下拉初始值.

推荐答案

一个常见的错误可能是,父组件将变量作为props 传递,在子组件被渲染时,该props 为null.因此,当您在挂载子组件中访问它时.您将其视为空值.稍后,在父组件中,传递的变量(prop)将被分配来自异步操作的值.为了避免可能的trap ,最好使用v-if.

例子:

<ChildComponent :data="testData" />

可以使用下面的方法代替上面的方法

<ChildComponent v-if="testData" :data="testData" />

因此,只有当testData可用时,才会呈现子组件.但如果在子组件中,在数据进入之前,您还有更多的东西要显示,以便更好地使用另一个组件.增加观察者也可以解决这个问题,但不是很好.

因为你在更新的钩子中得到了值,可能就是这样.

Vue.js相关问答推荐

BootstrapVue Popover:奇怪的react 行为

如何使用Nuxt 3动态处理无限嵌套路由?

如何将$validator实例注入到使用组合API语法的Vue2.7应用程序中

Vuetify右侧并排switch

如何将外部 svg 转换为 Vue3 组件?

Vue Datepicker 不会在渲染时显示默认日期

如何在 v-for 指令切换状态下安全地制作包含附加到对象的复选框的列表(W/O 切换列表中的其他复选框)?

在 Ajax 函数中访问 Vue.js 组件属性

我可以在打印 HTML 页面时使用作用域 CSS 吗? (使用 Laravel 和 Vue.js)

VueJS CKeditor5 上传图片

在 Vue 文件中创建根 Vue 实例

如何在 Vue.js 中添加动态组件/部分

VueJS 将 HTML 打印到页面

如何更新手动安装的 vue 组件上的props?

VueJS + Typescript:类型上不存在属性

VueRouter 未定义

Vuetify 单选按钮未显示为选中状态

如何在 Vue.js 3 中使用 Vue 3 Meta?

在 Vue JS 组件中使用 Laravel 路由的最佳方法是什么

如何从方法内部访问数据