Vue组件分隔符

Question

我为一个客户建立了一个网站，必须使用Vue 1.3版本。我在组件级别上使用字符串插值时遇到了问题，因为我定义的分隔符无法正常工作。 以下是我的代码示例，但是我一直收到一个错误，说 i'whatever'不存在。 我还在Twig模板中使用这段代码。

以下是我的代码示例：

Vue.config.delimiters = ['${', '}'];

Vue.component('component-name', {
    delimiters: ['${', '}'],
    template: `<template>${ showSomething() }</template>`,
    methods: {
        showSomething: function () {
            return 'SOMETHING';
        }
    }
})

new Vue({
      el: '#app',
});

- TheMan68

Answer 1

使用反斜杠来转义字符串插值。

有两种方法可以实现。 在 $ 符号之前或之后加上反斜杠。 在您的情况下：

template: `<template>\${ showSomething() }</template>`,

或者

template: `<template>$\{ showSomething() }</template>`,

app.js

Vue.config.delimiters = ['${', '}'];

Vue.component('component-name', {
    delimiters: ['${', '}'],
    template: `<template>\${ showSomething() }</template>`, // 'back slash to escape string interpolation'
    methods: {
        showSomething: function () {
            return 'SOMETHING';
        }
    }
})

new Vue({
      el: '#app',
});

- Srinivas Damam

---

如果我尝试使用你的解决方案，我会得到一个DOM异常，指出闭合}不是有效的属性名称，无法在元素上执行setAttribute操作。 - imolitor