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>
  • 相关阅读:
    软件项目版本号的命名规则及格式介绍
    软件项目版本号的命名规则及格式介绍
    够用一辈子的几句话
    十四个ASP.NET基础知识问答(C#版)
    够用一辈子的几句话
    够用一辈子的几句话
    软件项目版本号的命名规则及格式介绍
    leveldb java 版本
    Java List 的merge
    HBase 之mapreduce 提升
  • 原文地址:https://www.cnblogs.com/jinsuo/p/12083556.html
Copyright © 2011-2022 走看看