vue3 组件对js暴露数据
时间: 2023-08-05 21:09:55 浏览: 213
vue组件暴露和.js文件暴露接口操作
在 Vue 3 中,可以通过 `ref` 或 `reactive` 创建响应式数据,然后将这些数据作为组件的属性或通过 `setup` 函数暴露给外部使用。具体地说,有以下两种方式:
1. 将响应式数据作为组件的属性进行暴露,可以通过 `props` 选项将其声明为组件的属性,然后在模板或组件内部访问。例如:
```javascript
// ChildComponent.vue
<template>
<div>{{ count }}</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
count: {
type: Number,
default: 0
}
}
});
</script>
```
2. 在 `setup` 函数中创建响应式数据,并通过 `return` 语句将其暴露给外部使用。例如:
```javascript
// ChildComponent.vue
<template>
<div>{{ count }}</div>
</template>
<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
count: 0
});
return { state };
}
});
</script>
```
父组件中可以通过 `ref` 获取子组件实例,并访问其中暴露出来的响应式数据。例如:
```javascript
// ParentComponent.vue
<template>
<ChildComponent ref="child" />
</template>
<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
components: { ChildComponent },
setup() {
const child = ref(null);
const increment = () => {
child.value.state.count++;
};
return { child, increment };
}
});
</script>
```
阅读全文