您好,登錄后才能下訂單哦!
Vue中如何實(shí)現(xiàn)父子組件傳值,相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
(一)傳遞數(shù)值
1.子組件:Header.vue
<template> <div> <!-- data對(duì)象里并沒(méi)有 msg 屬性,這里調(diào)用的是父類傳遞過(guò)來(lái)的 msg 屬性 --> <h3>{{msg}}</h3> </div> </template> <script> export default { data() { return { } }, methods: { }, // 接收父類的傳值 props: ['msg'] } </script>
可以看到,在子組件中的data對(duì)象里并沒(méi)有 msg 屬性,這里調(diào)用的是父類傳遞過(guò)來(lái)的 msg 屬性,接收就是靠 props: ['msg']。
2.父組件Home.vue
<template> <div> <!-- 2.使用子組件,并向子組件傳值 --> <v-head :msg="msg"></v-head> <br> <br> </div> </template> <script> // 1.引入子組件 import Head from './Head.vue'; export default { data() { return { msg: '我是一個(gè)組件' } }, methods: { }, components: { "v-head": Head }, // 頁(yè)面刷新時(shí)請(qǐng)求數(shù)據(jù) mounted() { } } </script>
傳值的核心思想就是,在使用子組件的地方,加上要傳遞的值:<v-head :msg="msg"></v-head>
(二)傳遞方法
傳遞方法的寫(xiě)法和傳遞數(shù)值一樣,下面只寫(xiě)出關(guān)鍵步驟:
父組件
<template> <div> <!-- 2.使用子組件,并向子組件傳值 --> <v-head :run="run"></v-head> <br> <br> </div> </template> <script> // 1.引入子組件 import Head from './Head.vue'; export default { data() { return { msg: '我是一個(gè)組件' } }, methods: { run() { alert(this.msg); } }, components: { "v-head": Head }, // 頁(yè)面刷新時(shí)請(qǐng)求數(shù)據(jù) mounted() { } } </script>
子組件
<template> <div> <button @click="run">接收父組件的方法</button> </div> </template> <script> export default { data() { return { } }, methods: { }, // 接收父類的傳值 props: ['run'] } </script>
(三)傳遞對(duì)象
傳遞對(duì)象的寫(xiě)法和傳遞數(shù)值一樣,下面只寫(xiě)出關(guān)鍵步驟:
父組件
<template> <div> <!-- 2.使用子組件,并向子組件傳值,這里的 this 就是 Home 組件 --> <v-head :home="this"></v-head> <br> <br> </div> </template> <script> // 1.引入子組件 import Head from './Head.vue'; export default { data() { return { msg: '我是一個(gè)組件' } }, methods: { run() { alert(this.msg); } }, components: { "v-head": Head }, // 頁(yè)面刷新時(shí)請(qǐng)求數(shù)據(jù) mounted() { } } </script>
子組件
<template> <div> <!-- data對(duì)象里并沒(méi)有 msg 屬性,這里調(diào)用的是父類傳遞過(guò)來(lái)的 msg 屬性 --> <h3>{{msg}}</h3> <br> <br> <button @click="run">接收父組件的方法</button> </div> </template> <script> export default { data() { return { // 調(diào)用傳過(guò)來(lái)的home組件的msg屬性 msg: this.home.msg } }, methods: { run() { // 調(diào)用傳過(guò)來(lái)的home組件的run()方法 this.home.run(); } }, // 接收父類的傳值 props: ['home'] } </script>
(四)傳遞數(shù)值類型校驗(yàn)
props: { 'home': Object }
看完上述內(nèi)容,你們掌握Vue中如何實(shí)現(xiàn)父子組件傳值的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。