vue父子組件間傳值(props)

先定義一個子組件，在組件中注冊props

<template>
    <div>
        <div>{{message}}(子組件)</div>
    </div>
</template>
<script>
export default {
    props: {
        message: String  //定義傳值的類型
    }
}
</script>
<style>
</style>

 

在父組件中，引入子組件，並傳入子組件內需要的值

<template>
    <div>
        <div>父組件</div>
        <child :message="parentMsg"></child>   
    </div>
</template>

<script>

import child from './child'  //引入child組件
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  //在data中定義需要傳入的值
            }
        },
        components: {
            child
        }
}
</script>
<style>
</style>

 

這種方式只能由父向子傳遞，子組件不能更新父組件內的data