vue98-props中default默认值

最新推荐文章于 2025-08-11 09:08:26 发布

原创最新推荐文章于 2025-08-11 09:08:26 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #java #前端

Vue基础课程专栏收录该内容

178 篇文章

订阅专栏

本文介绍了一个Vue.js组件的示例，展示了如何使用默认属性初始化组件状态，并通过方法改变这些状态。重点在于如何正确地修改组件的属性，避免常见的错误做法。

<template>
  <div class="hello">
    <h3>{{ init }}</h3>
    <button @click="changeName">+1</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  //props是自定义属性 为当前属性定义初始值
  //对象设置默认值
  props: {
    init: {
      default: 9,
    },
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    changeName() {
      //报错 this.props是只读的
      this.init++;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
</style>

default设置默认值