问题描述
采用最新的<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>