Vue子组件调用父组件的方法

Vue中子组件调用父组件的方法，这里有三种方法提供参考

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

1.  
   <template>
2.  
   <div>
3.  
   <child></child>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   import child from ‘~/components/dam/child‘;
8.  
   export default {
9.  
   components: {
10.  
    child
11.  
    },
12.  
    methods: {
13.  
    fatherMethod() {
14.  
    console.log(‘测试‘);
15.  
    }
16.  
    }
17.  
    };
18.  
    </script>

子组件

1.  
   <template>
2.  
   <div>
3.  
   <button @click="childMethod()">点击</button>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   export default {
8.  
   methods: {
9.  
   childMethod() {
10.  
    this.$parent.fatherMethod();
11.  
    }
12.  
    }
13.  
    };
14.  
    </script>

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

父组件
 

1.  
   <template>
2.  
   <div>
3.  
   <child @fatherMethod="fatherMethod"></child>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   import child from ‘~/components/dam/child‘;
8.  
   export default {
9.  
   components: {
10.  
    child
11.  
    },
12.  
    methods: {
13.  
    fatherMethod() {
14.  
    console.log(‘测试‘);
15.  
    }
16.  
    }
17.  
    };
18.  
    </script>

子组件

1.  
   <template>
2.  
   <div>
3.  
   <button @click="childMethod()">点击</button>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   export default {
8.  
   methods: {
9.  
   childMethod() {
10.  
    this.$emit(‘fatherMethod‘);
11.  
    }
12.  
    }
13.  
    };
14.  
    </script>

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件

1.  
   <template>
2.  
   <div>
3.  
   <child :fatherMethod="fatherMethod"></child>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   import child from ‘~/components/dam/child‘;
8.  
   export default {
9.  
   components: {
10.  
    child
11.  
    },
12.  
    methods: {
13.  
    fatherMethod() {
14.  
    console.log(‘测试‘);
15.  
    }
16.  
    }
17.  
    };
18.  
    </script>

子组件
 

1.  
   <template>
2.  
   <div>
3.  
   <button @click="childMethod()">点击</button>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   export default {
8.  
   props: {
9.  
   fatherMethod: {
10.  
    type: Function,
11.  
    default: null
12.  
    }
13.  
    },
14.  
    methods: {
15.  
    childMethod() {
16.  
    if (this.fatherMethod) {
17.  
    this.fatherMethod();
18.  
    }
19.  
    }
20.  
    }
21.  
    };
22.  
    </script>

转：https://blog.csdn.net/zgrkaka/article/details/100528714

Vue子组件调用父组件的方法

原文：https://www.cnblogs.com/ygyy/p/13396188.html