快捷導(dǎo)航

Vue之props 配置詳解

更新時(shí)間：2021年11月21日 14:31:30 作者：王同學(xué)要努力

這篇文章主要為大家介紹了Vue之props 配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助

在這里插入圖片描述

<template>
  <div class="demo">
    <h1>{{ msg}}</h1>
    <h2>學(xué)生姓名：{{name}}</h2>
    <h2>學(xué)生性別：{{sex}}</h2>
    <h2>學(xué)生的年齡：{{myage+1}}</h2>
    <button @click="changeAge">點(diǎn)我修改數(shù)據(jù)</button>
  </div>
</template>

<script>
  export default {
    name: 'Student',
    data() {
      return {
        msg: '王者愛好者',
        myage:this.age
      }
    },
    methods: {
      changeAge(){
       this.myage=24
      }
    },
    //簡(jiǎn)單接收
   // props:['name','age','sex']


    //接收的同時(shí)對(duì)數(shù)據(jù)進(jìn)行類型的限制
    //  props:{
    //    name:String,
    //    age:Number,
    //    sex:String,
    //  }

//接收數(shù)據(jù)的同時(shí)對(duì)數(shù)據(jù)：進(jìn)行類型的限定+默認(rèn)值的指定+必要性的限制
  props: {
      name: {
        type: String, //name的類型
        required: true, //name是必要的
      },
      age: {
        type: Number, 
       default:22
      },
      sex: {
        type: String, 
        required: true
      }
 }

  }
</script>

<template>
  <div>
    <Student name="張三" sex="男" :myage="20"/>
  </div>
</template>

<script>
  //引入Student組件
  import Student  from './components/Student.vue'
  export default {
    name: 'App',
    components: {
     Student
    }
  }

</script>

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下
2022-11-11
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue?v-if未生效問題及解決
這篇文章主要介紹了vue?v-if未生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue如何動(dòng)態(tài)配置ip與端口
這篇文章主要介紹了vue如何動(dòng)態(tài)配置ip與端口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue3常用的API使用簡(jiǎn)介
這篇文章主要介紹了vue3常用的API使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-03-03
Vue3實(shí)現(xiàn)獲取驗(yàn)證碼按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了Vue3實(shí)現(xiàn)獲取驗(yàn)證碼按鈕倒計(jì)時(shí)效果,用戶點(diǎn)擊獲取驗(yàn)證碼按鈕,發(fā)送請(qǐng)求給后端,按鈕失效,并且開始倒計(jì)時(shí)60秒；在此期間,用戶無(wú)法再次點(diǎn)擊按鈕,即使用戶刷新頁(yè)面,倒計(jì)時(shí)依然存在,直到倒計(jì)時(shí)完畢,按鈕恢復(fù),感興趣的小伙伴跟著小編一起來看看吧
2024-10-10
利用vue重構(gòu)有贊商城的思路以及總結(jié)整理
這篇文章主要介紹了利用vue重構(gòu)有贊商城的思路以及總結(jié)整理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
Vue axios的使用和全局baseURL配置方式
作為一個(gè)全棧開發(fā)人員,前端UI框架和網(wǎng)絡(luò)請(qǐng)求都得有基本的掌握,我以最簡(jiǎn)潔易懂的方式講解axios的使用和全局baseURL的配置
2024-05-05
基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例
本篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
Vue中CSS?scoped的原理詳細(xì)講解
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下
2023-01-01