一、簡要介紹
父子組件之間的傳值主要有三種:傳遞數值、傳遞方法、傳遞對象,主要是靠子組件的 props 屬性來接收傳值,下面分別介紹:
(一)傳遞數值
1.子組件:Header.vue
<template> <div> <!-- data對象里并沒有 msg 屬性,這里調用的是父類傳遞過來的 msg 屬性 --> <h2>{{msg}}</h2> </div></template><script>export default { data() { return { } }, methods: { }, // 接收父類的傳值 props: ['msg']}</script>
可以看到,在子組件中的data對象里并沒有 msg 屬性,這里調用的是父類傳遞過來的 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: '我是一個組件' } }, methods: { }, components: { "v-head": Head }, // 頁面刷新時請求數據 mounted() { }}</script>
傳值的核心思想就是,在使用子組件的地方,加上要傳遞的值:<v-head :msg="msg"></v-head>
(二)傳遞方法
傳遞方法的寫法和傳遞數值一樣,下面只寫出關鍵步驟:
父組件
<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: '我是一個組件' } }, methods: { run() { alert(this.msg); } }, components: { "v-head": Head }, // 頁面刷新時請求數據 mounted() { }}</script>
子組件
<template> <div> <button @click="run">接收父組件的方法</button> </div></template><script>export default { data() { return { } }, methods: { }, // 接收父類的傳值 props: ['run']}</script>
(三)傳遞對象
傳遞對象的寫法和傳遞數值一樣,下面只寫出關鍵步驟:
父組件
<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: '我是一個組件' } }, methods: { run() { alert(this.msg); } }, components: { "v-head": Head }, // 頁面刷新時請求數據 mounted() { }}</script>
子組件
<template> <div> <!-- data對象里并沒有 msg 屬性,這里調用的是父類傳遞過來的 msg 屬性 --> <h2>{{msg}}</h2> <br> <br> <button @click="run">接收父組件的方法</button> </div></template><script>export default { data() { return { // 調用傳過來的home組件的msg屬性 msg: this.home.msg } }, methods: { run() { // 調用傳過來的home組件的run()方法 this.home.run(); } }, // 接收父類的傳值 props: ['home']}</script>
(四)傳遞數值類型校驗
props: { 'home': Object }
其他和上面類似!
以上所述是小編給大家介紹的Vue之父子組件傳值詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答