Vue.js 组件中的道具和数据答案

【问题标题】：Props and Data in Vue.js componentsVue.js 组件中的道具和数据
【发布时间】：2019-03-25 03:57:22
【问题描述】：

我正在尝试为 D&D 的遭遇和怪物构建一个 very simple DM screen。

我想做的是设置一种添加遭遇的方法，然后设置怪物，它们的统计数据会在添加时自动滚动。

我有两个组件，encounter 和 monster，还有一个 JSON 对象，其中设置了怪物数据 (monster_data)。想法是用户单击“添加怪物”然后选择要添加的怪物并且统计数据会滚动。

我很难理解同时拥有道具和数据的区别（坦率地说，这也是重点）。

我已经多次阅读文档，据我所知，道具是父母（遭遇）将数据传递给孩子（怪物）的一种方式，因此如果我将新怪物推入遭遇中呈现我传递给它的属性。但是我不能改变这些属性，如果我想设置那个怪物是什么类型的怪物，我不能通过道具来做到这一点。

Data 只是与组件相关的任意值。在文档中的示例中，按钮上的计数器没有作为属性传递。但可以通过函数操作和显示。

我的问题是我应该将怪物/遭遇作为数据而不是道具添加吗？如果是的话怎么做？我真的在为这个概念苦苦挣扎，如果我的方法完全错误，我可能会放弃 Vue 并回到 DOM 操作。

根据要求减少我的代码的JSFiddle。问题是我想将从编辑对话框中选择的值传递给怪物道具。

【问题讨论】：

这是关于范围界定的。数据是当前 vue 组件的本地数据。 props 继承自实现当前 vue 组件的父 vue 组件。您应该显示一些代码。没有它，没有人可以真正为您提交有意义的答案，因为您应该做什么的问题的答案取决于您如何构建您的应用程序。最好的地方是codesandbox.io
如果你想变异，那么你应该使用 vuex
多次阅读您的问题后，我认为您正试图过快地深入到 vue 的深处。 Vue 不是命令式语法，因此需要与 jQuery 等 DOM 操纵器完全不同的思维方式。这需要一段时间才能理解。没有捷径可走。您必须决定是想利用现有知识快速构建应用程序，还是想踏上学习新技能的旅程。
你应该看看Dynamic Components
但不要让上述内容让您灰心。 Vue值得！我保证。

标签： javascript vue.js vuejs2

【解决方案1】：

据我了解您的用例，这里有一个简单的示例可能会有所帮助。 JSFiddle

Vue.component('encounter', {
    props: ['encounter'], 
    template: '#encounter-template',
    methods: {
        addMonster: function() {
            var monster = {};
            this.encounter.monsters.push(monster);
        },
        onMonsterUpdate (updatedItem, i) {
            this.encounter.monsters.splice(i, 1, updatedItem);
        }
    }
});

Vue.component('monster', {
    template: '#monster-template',
    props: ['monster'], 
    data: function() {
        var data = {
            dialogVisible: false,
            monsterData: monster_data,
            selectedValue: this.monster.slug
        }

        return data;
    },
    methods: {
        toggleDialog: function() {
            if (this.dialogVisible) {
                this.dialogVisible = false;
            } else {
                this.dialogVisible = true;
            }
        },
        onSelected(e) {
          let selectedMonster = this.monsterData.filter(it => it.slug === e.target.value)[0];
          this.$emit('monsterUpdate', selectedMonster)
        }
    },
    updated: function() {
        console.log(this.monster);
    }
});

【讨论】：