Vue.2.6の動的なスロット名の付け方でインラインで書くことは可能?

環境

  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.6"
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-plugin-typescript": "^3.5.0",
    "@vue/cli-plugin-unit-jest": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.2.1",
    "vue-template-compiler": "^2.5.21"
  }

やりたいこと

以下のような、App.vueでfoo.vueを読み込みfoo.vueのslotを使いたいと考えております。
その時に、App.vueで<template #[dynamicSlotName]>と書いた時はOKという文字が表示されるのですが、
<template #[dynamicSlotName]><template #["item"]>として、直接"item"と書くと何も表示されなくなります。
<template slot="item">と書くことで直接文字列を書くことはできますが、
vue2.6からDeprecatedになるみたいなので、別の方法が知りたいです。
何か別の方法でdynamicSlotNameの箇所を"item"のように書くことはできないのでしょうか?

App.vue

<template>
  <foo>
    <template #[dynamicSlotName]>
      OK
    </template>
  </foo>
</template>

<script lang="ts">
import Vue from "vue";
import Foo from "./components/foo.vue";

export default Vue.extend({
  name: "app",
  components: {
    Foo
  },
  data () {
    return {
      dynamicSlotName: "item"
    }
  }
});
</script>

./components/foo.vue

<template>
  <div>
    <slot name="item"></slot>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Foo"
});
</script>

備考

$ vue createでvue projectを作成しました。

Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

vue2.6からDeprecatedになる

これは document の何処に書かれているのですか?

別の方法が知りたい

deprecated となるなら、記述されている近辺に新しい書き方が多分示されていると思います。

直接"item"と書くと何も表示されなく

一旦評価させるために、back-tick (`) で item を囲んだらどうですか?

#[`item`]

1 Like

ご返信ありがとうございます!

 #[`item`]

こちらの方法でインラインで文字を書くことができました!

vue2.6からDeprecatedになる

についてはこちらに書かれております