向子組件傳值

2020-12-29 10:54 更新

向子組件傳值采用 props 的方式,這里以一個(gè)示例來進(jìn)行說明。

定義子組件,在 props 里面注冊一個(gè) title 屬性:

// api-test.stml:


<template>
    <text>{title}</text>
</template>
<script>
    export default {
        name:'api-test',
        props:{
            title: String
        }
    }
</script>

這里定義的title屬性類型為String,屬性類型包括 String、Number、Boolean、Array、Object、Function等。

在其它頁面使用子組件時(shí)傳遞靜態(tài)值:

// app-index.stml:


<template>  
    <view>  
        <api-test title="Hello App!"></api-test> 
    </view>  
</template>
<script>
    import './components/api-test.stml'  

    
    export default {  
        name: 'app-index'
    }  
</script>

通過數(shù)據(jù)綁定傳遞動態(tài)值:

// app-index.stml:


<template>
    <view>
        <api-test v-bind:title="msg"></api-test>
    </view>
</template>
<script>
    import './components/api-test.stml'  

    
    export default {
        name: 'app-index',
        data() {
            return {
              msg: 'Hello App!'
          }
        }
    }
</script>

傳遞靜態(tài)值時(shí)只能傳遞字符串類型數(shù)據(jù),通過數(shù)據(jù)綁定的方式則可以傳遞任意類型的數(shù)據(jù)。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號