Question

我来自React，Vue坦率地说，即使是Javascript前瞻者，对我来说也大不相同。

根据样板代码（ HelloWorld.vue ），说我们有以下代码片段

 <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <p>
          For a guide and recipes on how to configure / customize this project,<br />
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
            >vue-cli documentation</a
          >.
        </p>
</template>


<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;

</style>

在这里，我无法理解我们的默认导出如何知道我们需要导出什么

由于该问题由于重复而被标记为已关闭，因此共享两者之间的差异

考虑，如果我们创建了一个函数，则在有反应的情况下（或将其作为任何函数）

const someFunc = () => (
   <div> 
   <h1> Test Component </h1>
   </div>
)

export default someFunc

这里我正在导出我的somefunc，可以在其他组件中以任意方式导入和使用它

import Whatever from "./location"

但是在上面的Vue片段中，我无法理解

的意义。

export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};

导出此对象的意义是什么？

此外，如果我需要写函数，我该在哪里？

Answer 1

export default {}上花括号中的所有内容（包括方法和数据）都将被导出，并且可以使用import进行导入，就像您在React上的示例中一样

import Whatever from "./location"

只需回答您的问题

Also, where would If suppose I need to will I write my functions, class?

方法和其他数据可以包含在export default {}上的花括号内。例如，

<script>
  export default {
    name: "HelloWorld",
    props: {
      message: {
        type: String
      }
    },
    data() {
      return {
        // put any data here, e.g.,
        isVueDeveloper: true
      }
    },
    methods: {
      // put any methods here, e.g.,
      firstMethod() {
        return;
      }
    }
  }
</script>

了解Vue中的导出声明

1 个答案: