vue2中的props的使用

最新推荐文章于 2025-02-23 09:16:30 发布

学魔学编程

最新推荐文章于 2025-02-23 09:16:30 发布

阅读量5.7k

点赞数

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

本文链接：https://blog.csdn.net/qq_59717525/article/details/121238372

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个使用Vue.js的简单示例，展示了如何创建一个计数器组件，通过点击按钮增加计数，并利用JavaScript的事件处理实现动态更新。

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

<template>
    <div>
<input type="button" value="点击" @click="changeCount">
<p> {{ count1 }} </p>

    </div>
</template>

<script>

export default{
   name:"count",
   props:{
      count:{
          type:Number, /* 类型 */
          default:100 , /* 外界没有传值 则默认值为100  */
          required:false /*必填  */
      },
      msg:String  /* 没有默认值 可以这样写  只是可读属性 不能直接修改会报错 你可以把值转接到data属性中 */
   },
   data(){
       return {
           count1:this.count
       }
   },

   methods:{
       changeCount(){
           this.count1++;
       }
   }
}
</script>