Vue 组件分隔符

Question

我有一个必须使用 vue 1.3 的客户端网站，我在对 id 使用字符串插值时遇到了问题，因为我定义的分隔符在组件级别不起作用。

在下面的代码示例中，我不断收到一条错误消息，提示我'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>`,

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',
});

Vue 组件分隔符

Vue Component delimiters

components

delimiter

vue.js

app.js