vue3 新实验属性 ＜script setup＞ 使用中的疑惑
问题描述
采用最新的<script setup>语法编码时，发现父组件调用子组件属性或方法报错，采用原来的旧语法则可以成功调用，有没有大佬能告知是不是BUG？
父组件
<template>
<msg ref="msgRef"></msg>
<msg1 ref="msgRef1"></msg1>
<div @click="editMsg">点击修改Msg</div>
<div @click="editMsg1">点击修改Msg</div>
</template>
<script setup>
import { ref } from 'vue'
import msg from './Test1.vue'
import msg1 from './Test2.vue'
defineProps({
msg: String,
})
const count = ref(0)
const msgRef = ref(null)
const msgRef1 = ref(null)
function editMsg() {
msgRef.value.setMsg('123456')
}
function editMsg1() {
msgRef1.value.setMsg('123456')
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>复制代码子组件test1
此处采用<script setup>语法
<template>
<div>
{{ state.msg }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
msg: '',
})
function setMsg(msg) {
state.msg = msg
}
</script>复制代码子组件test2
此处采用旧语法
<template>
<div>
{{ state.msg }}
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup(props, { emit }) {
const state = reactive({
msg: '',
})
function setMsg(msg) {
state.msg = msg
}
return {
state,
setMsg,
}
},
}
</script>
作者：指尖的代码
链接：https://juejin.cn/post/7012915514473201700