uniapp props怎么调用父件的方法-猿码集

uniapp props怎么调用父件的方法

在Vue中，父组件中可以通过props向子组件传递数据，而如果需要在子组件中调用父组件中的方法则可以使用$emit。在uniapp中同样可以使用这两种方式来进行组件间的通信。

1.使用props传递数据

假设我们有一个父组件Parent和一个子组件Child，需要在Child组件中调用Parent组件的方法。首先，在Parent组件中定义一个方法:


<template>
  <child-component :message="msg" @my-click="handleClick"></child-component>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'Hello World!'
      }
    },
    methods: {
      handleClick() {
        console.log('Clicked in Parent Component!');
      }
    }
  }
</script>

parent组件中向child组件传递了一个名为message的props和一个名为my-click的事件。在Child组件中，我们可以使用props接收Parent组件传递过来的值，使用$emit触发my-click事件:


<template>
  <button @click="handleClick">Click me!</button>
</template>
<script>
  export default {
    props: ['message'],
    methods: {
      handleClick() {
        this.$emit('my-click');
      }
    }
  }
</script>

在子组件中，我们使用props接收message，然后在点击按钮时触发my-click事件，从而向父组件发送消息。需要注意的是，my-click在父组件中使用了@监听，所以其触发后会执行父组件中相应的方法。

2.使用$parent和$refs直接调用父组件方法

在uniapp中，可以使用$parent访问父组件，使用$refs访问子组件。因此，我们可以在Child组件中使用$parent直接调用父组件的方法:


<template>
  <button @click="handleClick">Click me!</button>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        this.$parent.handleClick();
      }
    }
  }
</script>

这样就可以直接调用父组件中定义的handleClick方法。需要注意的是，这种方法调用方式有一定的局限性，如果需要在多层级嵌套的组件中使用，则可能会比较麻烦。

3.使用provide/inject

在uniapp中，还可以使用provide/inject来实现父子组件之间方法的调用。provide/inject是Vue框架中提供的一种高级选项，可以实现父组件向祖先组件中提供数据并在子组件中使用。

首先，在Parent组件中，使用provide提供一个名为handleClick的方法:


<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      handleClick: this.handleClick
    },
    methods: {
      handleClick() {
        console.log('Clicked in Parent Component!');
      }
    }
  }
</script>

我们将handleClick方法传递给子孙组件。

在Child组件中，使用inject接收provide中提供的handleClick方法，并进行调用:


<template>
  <button @click="handleClick">Click me!</button>
</template>
<script>
  export default {
    inject: ['handleClick']
  }
</script>

这样，我们就可以在Child组件中通过this.handleClick()调用父组件提供的handleClick方法。需要注意的是，provide/inject是基于祖先-后代组件关系可用，但确切的说并不保证父组件在provide时已经存在，因为provide的执行时机是早于created。

小结

以上三种方法均可以实现在子组件中调用父组件的方法。使用props和$emit相对较为简单，适合单向数据流的情况。而使用$parent和$refs直接调用父组件方法可能会存在组件层级过多的问题，适用于简单的父子组件之间的方法调用。而使用provide/inject则更加灵活，适用于复杂组件之间的通信情况。

uniapp props怎么调用父件的方法