在子组件中调用父组件函数

直接使用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>

通过this.$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.     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>

在父组件中调用子组件函数

1.给子组件定义一个ref属性。ref=“childItem”
2.在子组件的methods中声明一个函数。
getData:function (str) {console.log(str)}
3. 在父组件的中声明一个函数，并通过this.$refs.childItem.getData来使用子组件中声明的函数。