Vue中props怎么用

這篇文章主要為大家展示了“Vue中props怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中props怎么用”這篇文章吧。

前言：

在Vue中通過(guò)props,可以將原本孤立的組件串聯(lián)起來(lái)，也就是可以子組件可以接收父組件傳遞過(guò)來(lái)的data,比如子組件想要引用父組件的數(shù)據(jù)，那么在props里面聲明一個(gè)變量，這個(gè)變量就可以引用父元素的數(shù)據(jù)。

實(shí)例演示：

子組件：

<template>

  <div>

    <h4>我是{{name}},今年{{age}}歲,愛好：{{hobby}}</h4>,{{flag}}

  </div>

</template>



<script>

export default {

    name:'Cpn',

    // 簡(jiǎn)單接收

    /* props:['age','hobby','name'], */

    // 聲明要接收的數(shù)據(jù)，聲明時(shí)對(duì)接收的數(shù)據(jù)進(jìn)行限制

    props:{

        name: {

            // 聲明類型

            type:String,

            //聲明是否必需

            require:true,

            // 聲明默認(rèn)值

            default:'默認(rèn)值'

        },

        age:{

            type:Number,

            require:true,

            default:18

        },

        hobby:{

            type:String,

            require:false

        },

        flag:{

            type:Boolean,

            require:false

        }

    }

}

</script>

父組件：

<template>

  <div id="app">

    <!-- <cpn name='李明' age="22" hobby="打球"></cpn>

    <cpn name="小紅" age="20" hobby="彈琴"></cpn> -->

    <cpn name='李明'></cpn>

    <cpn hobby="編程" :flag="flag"></cpn>

      <!--備注：如果要將當(dāng)前組件data里的數(shù)據(jù)傳遞給子組件，需要通過(guò)v-bing:變量名=”變量名“的形式傳遞，如果傳遞的不是data里面的數(shù)據(jù)，就不用加綁定指令，即v-bind（可簡(jiǎn)寫為：）-->

    <button @click="changeFlag">切換</button>

  </div>

</template>

<script>

import Cpn from './components/Cpn.vue'

export default {

  components: { Cpn },

  name: "App",

  data() {

    return {

      flag:false

    }

  },

  methods: {

    changeFlag(){

      console.log(this.flag)

      this.flag=!this.flag;

      console.log(this.flag)

    }

  },

}

</script>

運(yùn)行上面的程序可以看到，當(dāng)我們通過(guò)點(diǎn)擊父組件的按鈕切換某個(gè)值時(shí)，子組件接收的值也會(huì)相應(yīng)變化。

子組件接收父組件的數(shù)據(jù)有兩種接收方式：

• 方式1：簡(jiǎn)單接收， 只需要給出所要接收的變量的名字即可

• 方式2: 具體接收，給每個(gè)接收的變量選擇性地指明數(shù)據(jù)類型，是否可為空，默認(rèn)值

以上是“Vue中props怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！