zoukankan      html  css  js  c++  java
  • vue子组件调用父组件的方法

    一、$parent

      父组件

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from './child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod(str) {
            console.log(str);
          }
        }
      };
    </script>

      子组件

    <template>
      <div>
        <button @click="childMethod">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod('hello');
          }
        }
      };
    </script>

    二、props

      父组件

    <template>
      <div>
        <child :fatherMethod="fatherMethodOther"></child>
      </div>
    </template>
    <script>
      import child from './child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethodOther(str) {
            console.log(str);
          }
        }
      };
    </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('hello');
            }
          }
        }
      };
    </script>

    三、$emit

      父组件

    <template>
      <div>
        <child @fatherMethod="fatherMethodOther"></child>
      </div>
    </template>
    <script>
      import child from './child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethodOther(str) {
            console.log(str);
          }
        }
      };
    </script>

      子组件

    <template>
      <div>
        <button @click="childMethod">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit('fatherMethod', 'hello');
          }
        }
      };
    </script>

    参考链接:https://www.jianshu.com/p/3b2651529dad

  • 相关阅读:
    LeetCode Generate Parentheses
    MVC中从Controller像View层传值
    IOS_多线程_ASI_AFN_UIWebView
    @PathVariable,@RequestParam, @RequestBody
    sql语句
    连表删除例子
    java中VO的使用(组成复杂的实体类)
    MyBatisPLus入门项目实战各教程目录汇总
    java常用函数
    复杂查询 new EntityWrapper<>()
  • 原文地址:https://www.cnblogs.com/helloNico/p/12427654.html
Copyright © 2011-2022 走看看