vue3如何使用自定义组件内的方法?
在vue2中我们自定义组件的方法在父组件中使用时可以使用this.$refs.方法名的方式进行使用而在vue3中想使用自定义组件中的方法或者值时需要使用 编译器宏将方法和值暴露出来具体说明看文档单文件组件 <script setup> | Vue.js示例:<template>给子组件起个名字吧=>{{name}}</template><script
·
在vue2中我们自定义组件的方法在父组件中使用时可以使用this.$refs.方法名的方式进行使用
而在vue3中想使用自定义组件中的方法或者值时需要使用 编译器宏将方法和值暴露出来
具体说明看文档 单文件组件 <script setup> | Vue.js
示例:
<template>
给子组件起个名字吧=>{{name}}
</template>
<script setup>
import { ref, defineExpose} from 'vue'
const name = ref('')
const setName = (v) => {
name.value = v
}
defineExpose({
setName
})
</script>
<style lang="scss" scoped></style>
<template>
<child ref="child"></child>
</template>
<script setup>
import { ref } from 'vue'
// ...引入组件
const child = ref(null)
// 这里的ref(null) = this.$refs vue3中使用refs需要在底部声明
// 使用子组件的方法
child.value.setName('小组件')
</script>
<style lang="scss" scoped></style>
更多推荐
已为社区贡献1条内容
所有评论(0)