如何將refs從父組件傳遞給子組件？ 不使用 Typescript？

Question

我有一個 App.vue，其屬性為“clicked”，我正試圖將其傳遞給子組件。

App.vue

<template>
  <NavBar :clicked="clicked"/>
  <BackDrop :clicked="clicked"/>
  <SideDrawer :clicked="clicked" />
  <router-view></router-view>
</template>
<script>
import { ref } from "vue";
import NavBar from "./components/Navbar/NavBar.vue";
import BackDrop from "./components/Backdrop/BackDrop.vue";
import SideDrawer from "./components/Sidedrawer/SideDrawer.vue";
export default {
  name: "App",
  components: { NavBar, BackDrop, SideDrawer },

  setup() {
    const clicked = ref(false);

    return { clicked };
  },
};
</script>
export default App;

因此可以有條件地呈現子組件，例如：

側邊抽屜.vue

<template v-if="clicked">
  <div class="sidedrawer"></div>
</template>
<script setup>
</script>

---

我是否在“App.vue”中正確傳遞了“clicked”引用？

如果我這樣做了，你如何在子組件中訪問它們？ 我已經用谷歌搜索並查看了一堆 StackOverflow 帖子，但其中大多數似乎都使用“defineProps()”，就像這段代碼：

const props = defineProps({
  msg: String,
  user: Object,
});

// Destructuring props
let { name, lastname } = props.user;
</script>

但我沒有使用 Typescript，所以這對我不起作用。

傳遞道具的“非打字稿”方式是什么？ 傳道具需要用Typescript嗎？

---

編輯：

即使當我實施 Typescript 並使用此代碼時：

側畫.vue

<template v-if="clicked">
  <div class="sidedrawer">
    <h1>{{ props.clicked }}</h1>
  </div>
</template>
<script setup>
const props = defineProps({
  clicked: boolean,
});
</script>

我收到錯誤：

'defineProps' is not defined.eslintno-undef

'boolean' is not defined.eslintno-undef

...

我從這個Github 線程收集來設置全局變量所以我這樣做了，但它仍然不起作用。

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
    globals: {
      defineProps,
      defineEmits,
      defineExpose,
      withDefaults
    }
  }
}

Answer 1

在 JavaScript 中，你有兩種常見的定義道具的方法，要么只使用道具名稱數組，如下所示：

const props = defineProps([ 'clicked', 'someOtherProp' ]);

或者更可取的（由於節省了數小時和數天的故障排除時間）是用 object 定義每個道具，如下所示：

  const props = defineProps({
    clicked: { type: Boolean, default: false, required: true },
  });

這是文檔的相關部分： https://vuejs.org/guide/components/props.html#prop-validation

Answer 2

不，定義道具時不需要 TypeScript。 TypeScript 是 JavaScript 的超集，因此任何 TypeScript 也是有效的 JavaScript。

使用<script setup>時，您可以使用 defineProps 來定義組件可以接受的道具。 您不需要在任何地方聲明或導入它，因為它是一個編譯器宏。 如果 ESlint 報錯，則說明它配置不正確。 將以下內容添加到您的 eslint 配置文件中。

module.exports = {
    env: {
        'vue/setup-compiler-macros': true
    }
}

在您的每個子組件中，您需要接受“clicked”作為屬性。

<script setup>
const props = defineProps(['clicked'])
</script>

或（使用運行時類型——這不是@Estus 指出的 Typescript）；

<script setup>
const props = defineProps({
  clicked: Boolean
})
</script>

在你的 App.vue 中，你需要傳遞一個值給 prop，如下所示；

<script setup>
import { ref } from "vue";

const clicked = ref(false);
</script>
<template>
    <NavBar :clicked="clicked"/>
    <BackDrop :clicked="clicked"/>
    <SideDrawer :clicked="clicked" />
    <router-view></router-view>
</template>

---

如果您不打算使用<script setup> ，那么您可以按如下方式定義要接受的道具；

export default {
  name: "NavBar",
  props: ['clicked']
};

或（使用運行時類型——這不是@Estus 指出的 Typescript）；

export default {
  name: "NavBar",
  props: {
    clicked: Boolean
  }
};

Answer 3

你需要在你的子組件中定義 Props 代碼，而不是在你的 app.vue 中。 也不要忘記使用腳本設置，這樣您就不必導入 defineprops。 從視圖。