​前言：

在中通過props,可以將原本孤立的元件串聯起來，也就是可以子元件可以接收父元件傳遞過來的data,比如子元件想要引用父元件的資料，那麼在props裡面宣告一個變數，這個變數就可以引用父元素的資料。

例項演示：

子元件：

<template>

  <div>

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

  </div>

</template>



<script>

export default {

    name:'Cpn',// 簡單接收

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

    // 宣告要接收的資料，宣告時對接收的資料進行限制

    props:{

        name: {

            // 宣告型別

            type:String,//宣告是否必需

            require:true,// 宣告預設值

            default:'預設值'

        },age:{

            type:Number,requirxjxwKNzHh
 
e:true,default:18

        },hobby:{

            type:String,require:false

        },flag:{

            type:Boolean,require:false

        }

    }

}

</script>

父元件：

<template>

  &lt;div id="app">

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

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

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

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

      <!--備註：如果要將當前元件data裡的資料傳遞給子元件，需要通過v-bing:變數名=”變數名“的形式傳遞，如果傳遞的不是data裡面的資料，就不用加繫結指令，即v-bind（可簡寫為：）-->

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

  </dxjxwKNzHh
 
iv>

</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>

執行上面的程式可以看到，當我們通過點選父元件的按鈕切換某個值時，子元件接收的值也會相應變化。

子元件接收父元件的資料有兩種接收方式：

• 方式1：簡單接收， 只需要給出所要接收的變數的名字即可
• 方式2: xjxwKNzHh具體接收，給每個接收的變數選擇性地指明資料型別，是否可為空，預設值

到此這篇關於 Vue中props用法介紹的文章就介紹到這了,更多相關 Vue中props用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多www.cppcns.com支援我們！