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>

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

  • 相关阅读:
    利用Airtest开发爬虫
    添加mitmproxy证书为安卓系统证书(模拟器亦可)
    mac下 安卓模拟器抓包推荐
    mac上appium连接ios
    HomeBrew和HomeBrew Cask的安装和使用
    NOIP2020 游记
    CSP2020 游记
    随机数之 xorShift128Plus 板子
    最大单词长度乘积(力扣第318题)
    两个整数之和(力扣第371题)
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11753507.html
Copyright © 2011-2022 走看看