Vue技术 props配置

最新推荐文章于 2024-05-19 20:04:25 发布

yitahutu79

最新推荐文章于 2024-05-19 20:04:25 发布

阅读量214

点赞数

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

本文链接：https://blog.csdn.net/qq_40713201/article/details/126942693

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

Student.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{myAge}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="changeAge">尝试修改年龄</button>
  </div>
</template>

<script>

export default {
    name:'Student',
    data(){
        return {
            msg:'我是一个尚硅谷的学生',
            myAge:this.age
        }
    },
    //简单声明接受
    // props:['name','age','sex'],
    //接受的同时对数据：进行类型限制、默认值指定、必要性限制
    props:{
      name:{
        type:String,
        required:true
      },
      age:{
        type:Number,
        default:99
      },
      sex:{
        type:String,
        required:true
      }
    },
    methods:{
      changeAge(){
        this.myAge++;
      }
    }
}
</script>

App.vue

<template>
  <div>
    <Student name="张三" :age="18" sex="女"/>
    <hr>
    <Student name="李四" :age="32" sex="男"/>
    <hr>
    <Student name="王五" :age="63" sex="女"/>
    <hr>
  </div>
</template>

<script>
import Student from './components/Student.vue'
  export default {
    name:'APP',
    components:{Student},
    
    
  }
</script>

<style>

</style>