Vue 组件分隔符

Question

我有一个必须使用 vue 1.3 的客户端网站，但我无法在 id 上使用字符串插值，因为我定义的分隔符在组件级别不起作用。

使用下面的代码示例，我不断收到错误消息，说 i'whatever' 不存在。我也在树枝模板中使用此代码。

这是我的代码示例：

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

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

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

Answer 1

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

您可以通过两种方式做到这一点。在$符号之前或之后放回斜线。在你的情况下：

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

或者

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

应用程序.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',
});