vue组件 data选项

wowocpp

于 2023-09-25 14:45:00 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

分类专栏： web_html 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wowocpp/article/details/133272779

web_html 专栏收录该内容

86 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>