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>

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

  • 相关阅读:
    容器跨主机网络通信学习笔记(以Flannel为例)
    Kubernetes控制器Job和CronJob
    记一次使用Flannel插件排错历程
    Kubernetes控制器Deployment
    Kubernetes如何通过StatefulSet支持有状态应用?
    react18 来了,我 get 到...
    gojs 实用高级用法
    vuecli3 vue2 保留 webpack 支持 vite 成功实践
    calibre 报错 This application failed to start because no Qt platform plugin could be initialized. Reinstalling the application may fix this problem. 解决
    unable to recognize "*.yaml": no matches for kind "RoleBinding" in version "rbac.authorization.k8s.io/v1beta1"
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11753507.html
Copyright © 2011-2022 走看看