叫你一声Vue3大神你敢答应吗？全面揭秘Vue3父组件如何花式花式调用子组件

2022-12-12 13:28:00

Vue 3 中父组件调用子组件的指南

1. Props

Props 是 Vue 3 中父组件向子组件传递数据的常用方法。在父组件中，我们可以使用 props 属性定义要传递的数据，而子组件可以通过 props 属性接收这些数据。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

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

<script>
export default {
  props: ['message']
}
</script>

2. Event

Event 是子组件向父组件发送消息的方式。在子组件中，我们可以使用 event 属性发送消息，而在父组件中，我们可以通过 event 属性接收这些消息。

// 父组件
<template>
  <child-component @message="handleMessage"></child-component>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

// 子组件
<template>
  <button @click="handleClick">发送消息</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello World!')
    }
  }
}
</script>

3. Ref

Ref 允许父组件获取子组件的实例。在父组件中，我们可以使用 ref 属性获取子组件实例，而在子组件中，我们可以通过 this.$refs 属性访问父组件的实例。

// 父组件
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child)
  }
}
</script>

// 子组件
<template>
  <div>我是子组件</div>
</template>

<script>
export default {
}
</script>

4. Inject

Inject 是子组件从父组件获取数据的另一种方法。在父组件中，我们可以使用 provide 属性提供数据，而在子组件中，我们可以通过 inject 属性获取这些数据。

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

<script>
export default {
  provide() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

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

<script>
export default {
  inject: ['message']
}
</script>

5. Provide

Provide 是父组件向子组件提供数据的另一种方式。它与 inject 相似，但它允许父组件向其所有子组件提供数据，而不仅仅是直接子组件。

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

<script>
export default {
  provide() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

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

<script>
export default {
  inject: ['message']
}
</script>