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>

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

  • 相关阅读:
    server 2016部署网络负载平衡(NLB)
    Windows Server 2012 搭建DHCP及远程路由访问
    第一章 Windows Server 2016网络管理
    不懂 ZooKeeper?没关系,这一篇给你讲的明明白白
    更新bios后进不了系统
    ICP备案和ICP许可证
    C# 解决“请求被中止: 未能创建 SSL/TLS 安全通道”的问题
    Is EnableViewStateMAC=true compulsory for ViewStateEncryption in an ASP.Net Website?
    Uses for MachineKey in ASP.NET
    5月底更新后桌面右下角出现的新闻资讯怎么删除?
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11753507.html
Copyright © 2011-2022 走看看