vue3 新实验属性 <script setup> 使用中的疑惑

4,134 阅读1分钟

问题描述

采用最新的<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>