溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.靜態傳值（在父組件中賦值好props中屬性的值傳遞給子組件）
父組件
<template>
<div>
<input v-model="message">
<child message="hello"></child>
</div>
</template>
<script>
import child from './components/child.vue'
export default{
components:{
child
}
}
</script>
子組件
<template>
<p>{{message}}</p>
</template>
<script>
export default{
props:['message'],
data(){
},
methods:{
fun:function(){
}
}
}
</script>
結果：打印hello
2.動態傳遞（根據父組件中值的改變，props動態的改變子組件中的值）
父組件
<template>
<div>
<input v-model="message">
<!--將childmessage與message通過v-bind指令綁定!-->
<child v-bind:childmessage="message"></child>
</div>
</template>
<script>
import child from "./components/child.vue"
export default{
//構建child組件
components:{
child
},
data(){
return {
//初始化message
message:''
}
}
}
</script>
2.子組件
<template>
<div>
<p>childmessage is:{{childmessage}}</p>
</div>
</template>
<script>
export default{
//將childmessage傳遞給child
props:['childmessage']
}
</script>
結果：兩者同步改變
以上所述是小編給大家介紹的vue中使用props傳值的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
