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>
  • 相关阅读:
    HTML-DOM实例——实现带样式的表单验证
    HTML-DOM常用对象的用法(select/option/form/table)
    class介绍
    let 和const命令
    页面滚动事件和利用JS实现回到顶部效果
    DOM的利用冒泡做的一个小程序
    BOM的对象总结(location,screen,navigator,history)
    IE下的双外边距浮动bug
    全国计算机三级网络工程技术复习笔记2
    全国计算机三级网络工程技术复习笔记1
  • 原文地址:https://www.cnblogs.com/jinsuo/p/12083556.html
Copyright © 2011-2022 走看看