Question

Vue应用程序使用的简单抽象数据模型，应该是：

Person.vue

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  }
}
</script>

或Person.js

class Person {
  constructor(props) {
    this.firstName = '';
    this.LastName = '';
  }
}
export default Person;

最终如何在不同的组件中使用它？

import Person from './Person';
...
  data () {
    return {
      userA: new Person(),
      userB: Person,
    }
  }

Answer 1

您可以创建名为“Person.vue”的组件。

<script>
export default {
name : 'person',
  props: {
    firstName: String,
    lastName: String
  }
}
</script>

要在其他“.vue”文件中使用该组件，首先，您必须使用：import Person from './Person';导入该组件，然后您可以使用它来调用：<person firstName="Toto" lastName="Titi"></person>

Answer 2

组件必须在父组件components部分中注册，或者使用Vue.component方法全局注册才能使用它们。例如：

<强> Person.vue

<script>
    export default {
       props: {
           firstName: String,
           lastName: String
       }
   }
</script>

<强> App.vue

<template>
    <person :firstName="a" :lastName="b"></person>
</template>

本地组件注册

<script>
import Person from './Person'
export default {
   data() {
       return {
           a: "A",
           b: "B"
       }
   },
   components: { Person }
}
</script>

全球组件注册

<script>
import Person from './Person'
import Vue from 'vue'

Vue.component('person', Person);

export default {
   data() {
       return {
           a: "A",
           b: "B"
       }
   }
}
</script>

正确的模式在vuejs中定义数据模式

2 个答案: