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>
  • 相关阅读:
    微软免费人工智能课程
    如何定义,创建,启动一个线程
    什么是进程,什么是线程?
    Hashtable 数据遍历的几种方式
    action中result没有值
    <global-results>怎么用
    普通请求和ajax请求的区别
    result默认返回action中的所有数据,要想返回指定的数据怎么做呢
    ajax技术的应用?
    什么是国际化
  • 原文地址:https://www.cnblogs.com/jinsuo/p/12083556.html
Copyright © 2011-2022 走看看