vue子组件使用父组件的methods

「爱情、让人受尽委屈。」 2021-07-25 22:16 453阅读 0赞

1、子组件通过 this.$parent.event 调用父组件方法

父组件：
    
    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default { 
        components: { 
          child
        },
        methods: { 
          fatherMethod() { 
            console.log('测试');
          }
        }
      };
    </script>

子组件
    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default { 
        methods: { 
          childMethod() { 
            this.$parent.fatherMethod();
          }
        }
      };
    </script>

2、使用 $emit()

父组件
    
    <template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default { 
        components: { 
          child
        },
        methods: { 
          fatherMethod() { 
            console.log('测试');
          }
        }
      };
    </script>

子组件
    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default { 
        methods: { 
          childMethod() { 
            this.$emit('fatherMethod');
          }
        }
      };
    </script>

3、父组件把方法传入子组件，子组件直接调用这个方法

父组件
    
    <template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default { 
        components: { 
          child
        },
        methods: { 
          fatherMethod() { 
            console.log('测试');
          }
        }
      };
    </script>

<template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default { 
        props: { 
          fatherMethod: { 
            type: Function,
            default: null
          }
        },
        methods: { 
          childMethod() { 
            if (this.fatherMethod) { 
              this.fatherMethod();
            }
          }
        }
      };
    </script>