时间戳

首页 > 解决方案 > Vue 属性中的子对象正在丢失原型中的方法

javascript - Vue 属性中的子对象正在丢失原型中的方法

问题描述

我正在使用 Vue 来显示（除其他外）一个六边形网格。我正在使用Honeycomb库在内存中表示它。它提供了一个Grid包含实际数据的对象和许多操作它的方法（Array为方便起见，包括来自 type 的所有方法）。

我尝试将它作为属性传递给我的 Vue 组件

@Component
export default class TileMap extends Vue {
@Prop() private grid!: Grid;

但是我的Vue组件中的所有方法都丢失了

是预期的吗？我应该避免具有属性的对象的属性吗？

标签： javascripttypescriptvue.js

解决方案

很遗憾

对象必须是普通的：浏览器 API 对象和原型属性等原生对象将被忽略。一个经验法则是数据应该只是数据——不建议观察具有自己状态行为的对象。

资源

对于这种情况，我没有看到任何好的解决方法。

在窗口对象中存储东西？

在具有内部状态的某些服务中包装网格逻辑？

或者将网格包装在一个函数中，然后将其作为道具传递给孩子？

最后一个效果惊人

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import Test from './Test.vue'
import { Vue, Component, Prop, Provide, ProvideReactive } from "vue-property-decorator";

@Component({
    components : { Test }
})
export default class App extends Vue {
    @Provide() private gridFunc: () => Grid = null;

    mounted() {
        const grid = defineGrid().rectangle({ width: 4, height: 4 });
        this.gridFunc = () => grid;
    }
}

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import { Vue, Component, ProvideReactive, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class Test extends Vue {
    @Prop() private gridFunc!: () => Grid<any>;

    @Watch('gridFunc')
    onGridChange(val: string, oldVal: string) {
        console.log(this.gridFunc());
    }
}

推荐阅读