vue3 script setup 中 父组件 响应子组件事件 通过 provide inject 写法实现

在 Vue3 中，可以使用 `provide` 和 `inject` 实现父组件响应子组件事件。

首先，在父组件中使用 `provide` 提供一个方法或数据：

<template>
  <div>
    <child @child-click="handleChildClick" />
  </div>
</template>

<script setup>
import Child from './Child.vue'

const handleChildClick = () => {
  // 处理子组件事件
}

provide('handleChildClick', handleChildClick)

</script>

然后，在子组件中使用 `inject` 注入父组件提供的方法或数据：

<template>
  <button @click="handleClick">点击触发父组件事件</button>
</template>

<script setup>
import { inject } from 'vue'

const handleChildClick = inject('handleChildClick')

const handleClick = () => {
  handleChildClick()
}

</script>

这样子组件中的点击事件就能够触发父组件中提供的方法，实现了父组件响应子组件事件的功能。

相关问题

vue3 采用script setup写法 实现 父组件 响应子组件事件 使用 provide inject

在Vue3中，可以使用`script setup`语法来编写组件。在`script setup`中，可以使用`defineEmits`定义组件可以发出的事件，以及使用`defineExpose`来将组件的状态和方法暴露给父组件。

接下来，我们可以在父组件中使用`provide`来向子组件提供一个响应事件的方法，然后在子组件中使用`inject`来获取这个方法，并在需要的时候进行调用。

下面是一个示例代码：

<template>
  <div>
    <p>子组件发出的事件：{{ message }}</p>
    <Child @emit-message="handleMessage" />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'

// 定义组件可以发出的事件
const emitMessage = defineEmits(['emit-message'])

// 定义状态和方法
const message = ref('')

// 提供一个响应事件的方法
const handleMessage = (msg) => {
  message.value = msg
}

// 将方法提供给子组件
provide('handle-message', handleMessage)
</script>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    // 响应子组件发出的事件
    handleMessage(msg) {
      this.message = msg
    }
  }
}
</script>

在上面的代码中，父组件提供了一个名为`handle-message`的方法，子组件可以使用`inject`来获取这个方法并在需要的时候进行调用。父组件使用了`defineEmits`来定义了一个`emit-message`事件，子组件可以通过调用`emit`方法来触发这个事件。在父组件中，我们通过`@emit-message="handleMessage"`来监听子组件发出的事件，并在事件触发时调用`handleMessage`方法来更新状态。

vue3 script setup 中 provide inject 写法

在 Vue3 的 script setup 中，可以通过 provide 和 inject 来实现组件之间的数据传递。

provide 和 inject 的写法如下：

<script setup>
import { provide, inject } from 'vue'

const foo = 'hello world'

provide('foo', foo)

const bar = inject('foo')
</script>

在上面的例子中，我们使用 provide 来提供一个名为 'foo' 的变量，值为 'hello world'。然后使用 inject 来获取 'foo' 的值，将其赋值给变量 'bar'。

需要注意的是，provide 和 inject 的第一个参数必须是字符串类型，用于标识提供的变量或方法的名称。在使用 inject 获取值时，如果提供的名称不存在，会返回 undefined。

另外，provide 和 inject 还支持使用一个对象来提供或获取多个变量或方法。具体写法如下：

<script setup>
import { provide, inject } from 'vue'

const config = {
  foo: 'hello world',
  bar: () => console.log('hello')
}

provide('config', config)

const { foo, bar } = inject('config')
</script>

在上面的例子中，我们将多个变量或方法放在一个名为 'config' 的对象中，然后使用对象解构语法来获取这些变量或方法。