我正在使用VUE 3,Option API.我想使用提供/注入.

data() {
  return {
    table_columns: null,
   }
},

provide() {
  return {
    table_columns_data: this.table_columns
  }
},

created(){

  this.table_columns = Object.entries(this.table_data.fields).filter(field => {
    return field[1].is_column;
  });

},

当我在子组件上注入TABLE_COLUMNS_DATA时,为空.因此,我似乎不能将Created()挂钩中构建的内容传递给Provide函数.

有什么办法吗?

推荐答案

根据vuejs docs,简单的解决方法是更改提供,因此它使用如下所示的计算:

import { computed } from 'vue'

//...

provide() {
  return {
    table_columns_data: computed(()=> this.table_columns)
  }
},

以下是vue playground年中的一个工作示例

Vue.js相关问答推荐

设置Vite Vue 3需要多个应用程序输出目录

vue 不重新渲染数据更改

是否可以将 nuxt3 与类星体框架一起使用

纵横比元素溢出容器

何时将代码拆分为 Nuxt 中的组件?

使用 Nuxt 动态获取文件夹中的图像路径

如何使用 vue 或 javascript 向服务器发送密码?

在 Vuex 的状态下动态创建一个响应式数组

Vue Table 2 - 自定义过滤器

Vue 单元测试:您正在开发模式下运行 Vue?

如何将 vue.js 与 gulp 一起使用?

如何在不实例化根实例的情况下使用 vue 组件?

Vue.js 中 Chrome 和 Datalist 的性能问题

如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?

Vue 和 TypeScript 所需的props

Nuxt 应用程序在刷新动态路由时返回 404(Tomcat 服务器)

如何使用 JavaScript 按索引删除数组元素?

更改时(change)调用函数

标签中的 href 赋值

在 Vuejs 中全局导入 Axios 方法