当组件导入另一个组件时，vuejs $refs 不起作用

Question

我的网络控制台说：

TypeError: this.$refs.smile.sayHi is not a function

首先我创建了一个vuejs项目：

添加一个

src/components/Smile.vue

<template>
  <h1>Smile</h1>
</template>

添加另一个

src/components/BigSmile.vue

<script setup>
  import Smile from './Smile.vue';
</script>

<template>
  <h1>Big</h1>
  <Smile/>
</template>

<script>
export default {
  methods:{
    sayHi:function() { alert('Hi babe'); }
  }
}
</script>

并将

src/components/TheWelcome.vue

编辑为：

<script setup>
import BigSmile from './BigSmile.vue';
</script>

<template>
  <BigSmile ref="smile"/>
</template>

<script>
export default {
  mounted:function() {
    this.$refs.smile.sayHi();
  }
}
</script>

如果我将

src/components/BigSmile.vue

更改为：

<script setup>
</script>

<template>
  <h1>Big</h1>
</template>

<script>
export default {
  methods:{
    sayHi:function() { alert('Hi babe'); }
  }
}
</script>

突然就起作用了。

我希望能够使用嵌套 SFC 组件来 $refs。可以吗？

Answer 1

请选择一种 vue API 样式 composition 或 options，不要将两者同时用于组件，因为 refs 将首先针对 composition。

<script setup>

是成分

<script>

作为 选项

vue API 样式参考文档

composition API 中的示例

src/components/BigSmile.vue

<template>
  <h1>Big</h1>
  <Smile />
</template>

<script setup>
import Smile from './Smile.vue';

const sayHi = () => { alert('Hi babe'); };
</script>

选项 API 中的示例

src/components/BigSmile.vue

<template>
  <h1>Big</h1>
  <Smile />
</template>

<script>
import Smile from './Smile.vue';

export default {
  components: {
    Smile
  },
  methods: {
    sayHi() {
      alert('Hi babe');
    }
  },
}
</script>

希望有帮助。