zoukankan      html  css  js  c++  java
  • vue子组件调用父组件的方法

    第一种方法是直接在子组件中通过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>

    第二种方法是在子组件里用$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>

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

    父组件

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

    三种都可以实现子组件调用父组件的方法,但是效率有所不同,根据实际需求选择合适的方法

  • 相关阅读:
    grep取缩写|awk两个文件取交集
    p{space}|p{Hex}|p{Digit}|转译符|1|g{-1}|[^ab]|/([^dD]+)/
    线性回归的简单实现mxnet
    线性回归从0实现——mxnet
    决策树(DT)
    C++基本语法(三)存储类及运算符
    C++基本语法(二)数据类型及变量类型、常量
    C++基本语法(一)
    np.zeros((a,b,c))
    python之range()
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11753507.html
Copyright © 2011-2022 走看看