父子组件之间传值、方法汇总

一、父组件向子组件传值

父组件：

<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>