[Organization and Sharing] Common methods and techniques for Vue parent components to call child components

In Vue development, we usually encounter situations where we need to call child components in parent components. In this case, we need to master some basic knowledge points to complete this task correctly.

This article will introduce some common methods and techniques to implement the function of Vue parent component calling child components.

1. Use $refs

In Vue, each component has its own $refs attribute, and you can get the instance object of the component. Therefore, we can obtain the instance object of the subcomponent through the $refs attribute of the parent component, thereby calling the method of the subcomponent or accessing the properties of the subcomponent.

Here is a simple example showing how to use $refs to call child components:

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod () {
      this.$refs.child.childMethod() // 调用子组件的方法
    }
  }
}
</script>

In the above example, we use ref="child in the parent component "To obtain the instance object of the child component, and then call the method of the child componentchildMethod().

It should be noted that if the child component is dynamically created through v-for, then what is accessed through $refs in the parent component is an array. The corresponding subcomponent instance needs to be selected based on the index.

2. Using events

In Vue, the parent component can trigger events in the child component through the $emit method. Child components can communicate with parent components by listening to these events.

Here is a simple example showing how to use events to communicate between parent and child components:

// 子组件
<template>
  <div>
    <button @click="emitEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent () {
      this.$emit('my-event', 'hello') // 触发事件
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @my-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent (data) {
      console.log(data) // 打印子组件传递的数据
    }
  }
}
</script>

In the above example, the child component passes this.$emit ('my-event', 'hello') triggers an event named my-event and passes a data hello. The parent component listens to the event by adding @my-event="handleChildEvent" to the child component, and passes the event data to its own method handleChildEvent(data) .

In addition, we can also achieve deep data transfer by declaring a props property in the child component and then passing the data in the parent component.

3. Use $parent

In some cases, we may need to obtain our own parent component instance object in the child component. You can use $ in the child component. parentproperty to get the instance object of the parent component.

The following is a simple example that shows how to use $parent to get the instance object of the parent component:

// 子组件
<template>
  <div>{{parentMessage}}</div>
</template>

<script>
export default {
  computed: {
    parentMessage () {
      return this.$parent.message // 获取父组件的数据
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: '这是父组件的数据'
    }
  }
}
</script>

In the above example, the child component is passed in computed Use this.$parent.message in the attribute to get the data message of the parent component.

It should be noted that if the component level is nested too deep, using $parent may lead to a decrease in code readability. Therefore, in actual development, it is necessary to avoid too deep a nesting level. .

Summary

In Vue, it is a very common operation for a parent component to call a child component. We can achieve communication between the parent component and the child component by using $refs, events and $parent. . In addition, there are many other methods, such as using dependency injection or vuex and other technologies, to meet different development needs.

The above is the detailed content of [Organization and Sharing] Common methods and techniques for Vue parent components to call child components. For more information, please follow other related articles on the PHP Chinese website!