What should I do if the uniapp subcomponent cannot obtain the parent component data?

In the process of using uniapp to develop small programs or H5 applications, we often encounter situations where the sub-component needs to obtain the data of the parent component. However, sometimes we will find that the js code in the sub-component cannot obtain the data passed by the parent component. . This is because in Vue, child components cannot directly access the data in the parent component. So how do we solve this problem? Below, this article will provide some solutions to help you solve this problem smoothly during the development process.

1. Use props to pass data

In Vue, data is passed to child components through props (properties), so that child components can use the data passed by the parent component. We can define a value in the parent component and then bind it to the child component, so the child component can read the value. The following is a sample code:

Parent component:

<template>
  <div>
    <child-component :parentData="parentData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  }
}
</script>

Child component:

<template>
  <div>{{parentData}}</div>
</template>
<script>
export default {
  props: {
    parentData: String
  }
}
</script>

Passing data through props is the most commonly used method in Vue. However, sometimes we encounter some special situations, such as a child component that needs to obtain data before the parent component is loaded. At this time, we need to use another method.

2. Use $parent to get the parent component instance

Vue provides the $parent attribute, which can be used to get the instance of the parent component. Through this instance, we can directly call the data of the parent component. The following is a sample code:

Parent component:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  },
  mounted() {
    this.$refs.child.printParentData()
  }
}
</script>

Child component:

<template>
  <div>子组件</div>
</template>
<script>
export default {
  methods: {
    printParentData() {
      console.log(this.$parent.parentData)
    }
  }
}
</script>

In the above code, we obtain the parent component instance through $parent, and then call The parentData data in this instance finally successfully obtained the data in the parent component.

It should be noted that if this method is used improperly, it may cause some coupling problems, so when using it, you must weigh the pros and cons based on the specific scenario.

3. Use $emit to trigger parent component events

In addition to using props and $parent to obtain parent component data, we can also trigger parent component events through $emit to pass data. The specific implementation process is as follows:

Parent component:

<template>
  <div>
    <child-component @getChildData="getChildData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    getChildData(data) {
      this.parentData = data
    }
  }
}
</script>

Child component:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('getChildData', '来自子组件的数据')
    }
  }
}
</script>

In the above code, we triggered an event named getChildData through $emit , and pass the data that needs to be passed in the child component to the parent component. In the parent component, we bind the @getChildData event to accept the data passed by the child component and save it in parentData.

The event name for receiving data can be defined by the developer. Just ensure that the event names of the child component and the parent component are consistent.

The above is the solution to the problem that the uniapp sub-component js cannot obtain the parent component data. In different scenarios, we can choose different ways to solve this problem. Hope this article is helpful to everyone.

The above is the detailed content of What should I do if the uniapp subcomponent cannot obtain the parent component data?. For more information, please follow other related articles on the PHP Chinese website!