vue之父组件之间调用方法

1.父组件调用子组件方法

1.可以通过ref

//子组件里面的方法
methods: {
    async getAppIdNameArr(createBy) {
    	console.log('即将被父组件调用')
    }
  }

//父组件调用
先在子组件标签上定义个ref,然后父组件直接调用

<ChannelLinkage
          :app-id-select.sync="form.appId"
          :is-channel-default="isChannelDefault"
          :is-reset.sync="isReset"
          ref="channelLinkBox"
        ></ChannelLinkage>
setcacheForm() {
      this.$refs.channelLinkBox.getAppIdNameArr()
    },

2.子组件调用父组件方法

2.1是直接在子组件中通过this.$parent.event来调用父组件的方法

//父组件

<template>
    <div>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
      fatherFun() {
        console.log('我是父组件中的方法');
      }
    }
}
</script>


//子组件

<template>
  <div @click="clickNow">我是子组件</div>
</template>
<script>
export default {
  methods: {
    clickNow() {
    	this.$parent.fatherFun();
    },
  },
};
</script>

2.2子组件通过$emit向父组件触发一个事件(比较常用的),父组件监听即可。

//父组件
<template>
  <div>
    <child @fatherFun="fatherFun"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherFun() {
        console.log('测试');
      }
    }
  };
</script>
//子组件
<template>
  <div>
    <button @click="childNow()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childNow() {
        this.$emit('fatherFun');
      }
    }
  };
</script>

3.父组件传递一个方法给子组件

//父组件
<template>
  <div>
    <child :fatherFun="fatherFun"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherFun() {
        console.log('测试');
      }
    }
  };
</script>
//子组件
<template>
  <div>
    <button @click="clickNow()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherFun: {
        type: Function,
        default: null
      }
    },
    methods: {
      clickNow() {
          this.fatherFun();
      }
    }
  };
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值