vue父组件使用子组件函数,vue子组件使用父组件函数

前端开发 同时被 2 个专栏收录
211 篇文章 9 订阅
86 篇文章 3 订阅

(1)vue中父组件调用子组件函数

用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法

详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即 this.$refs.refName.

然后再进行调用,也就是 this.$refs.refName.method

子组件:
    <template>
      <div>
        childComponent
      </div>
    </template>
     
    <script>
      export default {
        name: "child",
        methods: {
          childClick(e) {
            console.log(e)
          }
        }
      }
    </script>
父组件:
    <template>
      <div>
        <button @click="parentClick">点击</button>
        <Child ref="mychild" />   //使用组件标签
      </div>
    </template>
     
    <script>
      import Child from './child';   //引入子组件Child
      export default {
        name: "parent",
        components: {
          Child    // 将组件隐射为标签
        },
        methods: {
          parentClick() {
            this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
          }
        }
      }
    </script>

(2)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>
  • 10
    点赞
  • 3
    评论
  • 37
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值