vue组件 data选项

最新推荐文章于 2025-07-16 08:46:11 发布

原创最新推荐文章于 2025-07-16 08:46:11 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

web_html 专栏收录该内容

86 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用`data`选项实现组件间的简单数据交互，以App.vue文件导入并使用BaseCount.vue组件，展示了基础的父子组件通信和状态管理。

vue组件 data选项

在这里插入图片描述

错的

App.vue

<template>
  <div class="app">
    <baseCount></baseCount>
    <baseCount></baseCount>
    <baseCount></baseCount>
  </div>
</template>

<script>
import baseCount from "./components/BaseCount";
export default {
  components: {
    baseCount,
  },
};
</script>

<style>
</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 100,
    };
  },
};
</script>

<style>
.base-count {
  margin: 20px;
}
</style>