在 Vue.js 3 中设置自定义分隔符

Question

我正在尝试在 Vue.js 3 中设置自定义分隔符，但它似乎不起作用。

我尝试的第一件事是delimiters像这样设置组件参数：

export default defineComponent({
    delimiters: ["${", "}$"],
    // ...
})

但什么也没有发生。

然后我尝试像这样设置main.ts文件：

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

App.delimiters = ["${", "}$"];

createApp(App)
   .use(router)
   .mount("#app");

模板中的字符串插值再次不起作用。

我错过了什么？

Answer 1

需要在里面 createApp

例子：

var app = Vue.createApp({
  data() {return {message: 'Ciao'}},
  compilerOptions: {
    delimiters: ["${", "}$"]
  }
}).mount('#app');

<script src="https://unpkg.com/vue@3.0.1/dist/vue.global.prod.js"></script>
<div id="app"><h1>Message: ${message}$</h1></div>