父子組件之間傳值、方法匯總

本文轉載自查看原文 2022-01-05 13:17 7647

一、父組件向子組件傳值

父組件：

<child :inputName="name"></child>

 1 <script>
 2     import child from './sub-select.vue';
 3     export default {
 4         components: { child },
 5         data(){
 6             return {
 7                 name: '父組件中的值' 
 8             }
 9         },
10         methods:{
11             
12         }
13     }
14 </script>

子組件：通過props接收

<view>{{inputName}}</view>

 1 <script>
 2     export default {
 3         // props: ['inputName'],
 4                 props: {
 5             inputName: String
 6         },
 7         data(){
 8             return {
 9                  
10             }
11         },
12         methods:{
13             
14         }
15     }
16 </script>

二、子組件向父組件傳值

子組件：通過$emit()

<button @click="sendMes">send</button>

 1 <script>
 2     export default { 
 3         data(){
 4             return {
 5                 message: '子組件的值'
 6             }
 7         },
 8         methods:{
 9             sendMes() {
10                 this.$emit('child-event', this.message)     // 傳遞的事件名稱不支持駝峰命名 11             }
13         }
14     }
15 </script>

父組件：

<child @child-event="parentFn"></child>
<div>{{message}}</div>

 1 <script> 
 2     import child from './sub-select.vue';
 3     export default { 
 4         components: { child },
 5         data(){
 6             return {
 7                 message: '' 
 8             }
 9         },
10         methods:{
11             parentFn(payload) {
12                 this.message = payload; 
13             }  
14         }
15     }
16 </script>

三、父組件調用子組件方法

子組件：

<button @click="childMethod">點擊子組件中的方法</button>

 1 <script>
 2     export default { 
 3         data(){
 4             return {
 5                  
 6             }
 7         },
 8         methods:{
 9             childMethod() {
10                 console.log('我是子組件中的方法')
11             } 
12         }
13     }
14 </script>

父組件：定義一個函數，在此函數中調用子組件中的方法

<child ref="childfn"></child>
<button @click="parentMethod"></button>

 1 <script>
 2     import child from './sub-select.vue'
 3     export default { 
 4         components: { child },
 5         data(){
 6             return {
 7                  
 8             }
 9         },
10         // onLoad() {
11         //     this.$refs.childfn.childMethod()
12         // },
13         methods:{
14              parentMethod() {
15                 this.$refs.childfn.childMethod() 
16              }
17         }
18     }
19 </script>

注意：這里在onload中直接調用子組件中的函數，會報錯：Error in onLoad hook: "TypeError: Cannot read properties of undefined (reading 'childMethod')"

四、子組件調用父組件方法

1、

父組件：

<child></child>

 1 <script>
 2     import child from './sub-select.vue'
 3     export default { 
 4         components: { child },
 5         data(){
 6             return {
 7                  
 8             }
 9         }, 
10         methods:{
11              parentMethod() {
12                 console.log('我是父組件中的方法')
13              }
14         }
15     }
16 </script>

子組件：

<button @click="childMethod()">點擊子組件，調用父組件中的方法</button>

 1 <script>
 2     export default { 
 3         data(){
 4             return {
 5                  
 6             }
 7         },
 8         methods:{
 9             childMethod() {
10                 console.log(this.$parent)
11                 this.$parent.parentMethod();
12             } 
13         }
14     }
15 </script>

2、在子組件里用$emit向父組件觸發一個事件，父組件監聽這個事件就行了。

子組件：

<button @click="childMethod">點擊子組件，調用父組件中的方法</button>

 1 <script>
 2     export default { 
 3         data(){
 4             return {
 5                 
 6             }
 7         },
 8         methods:{
 9             childMethod() {
10                 this.$emit('listenToChildEvent')
11             } 
12         }
13     }
14 </script>

父組件：

<child @listenToChildEvent="parentMethod"></child>

 1 <script>
 2     import child from './sub-select.vue'
 3     export default { 
 4         components: { child },
 5         data(){
 6             return {
 7                  
 8             }
 9         }, 
10         methods:{
11              parentMethod() {
12                 console.log('我是父組件中的方法')
13              }
14         }
15     }
16 </script>

3、將父組件中的方法傳入子組件后，在子組件直接調用這個方法

父組件：

<child :parentMethod="parentMethod"></child>

 1 <script>
 2     import child from './sub-select.vue'
 3     export default { 
 4         components: { child },
 5         data(){
 6             return {
 7                  
 8             }
 9         }, 
10         methods:{
11              parentMethod() {
12                 console.log('我是父組件中的方法')
13              }
14         }
15     }
16 </script>

子組件：

<button @click="childMethod()">父組件方法傳入子組件后，子組件中直接調用</button>

 1 <script>
 2     export default { 
 3         props: {
 4             parentMethod: {
 5                 type: Function,
 6                 default: null
 7             }
 8         },
 9         data(){
10             return {
11                  
12             }
13         },
14         methods:{
15             childMethod() {
16                 this.parentMethod();
17             } 
18         }
19     }
20 </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uniapp父子組件之間傳值 react父子組件之間傳值 vue父子組件之間的傳值 Vue.js中父子組件之間的傳值和傳方法 angular父子組件的傳值，兄弟之間傳值 vue 父子組件傳值以及方法調用，平行組件之間傳值以及方法調用大全 Vue 父子組件及同級組件之間的傳值 VUE父子組件之間的傳值，以及兄弟組件之間的傳值 Vue父子組件傳值的方法父子組件間傳值和傳方法