使用Django和Vue-loader的Vue.js组件特定分隔符
使用Django和Vue-loader的Vue.js组件特定分隔符
提问于 2021-01-18 07:05:10
我正在创建一个Django + Vue.js v3应用程序，我发现使用vue3-sfc-loader非常有用，因为我可以使用Django轻松渲染.vue文件，并获得两个世界的最佳效果。这个设置起作用了，Django成功地呈现了.vue文件，然后由vue3-sfc-loader拾取，但问题是我不能更改Vue分隔符，无论是在组件级别还是在全局级别。
一种有效的解决方案是使用Django {% verbatim %}，但非常不方便。
我还尝试使用Vue全局混合来设置分隔符，但没有成功，尽管我不确定在我的上下文中是否正确地使用了then。
在这种情况下，有没有办法在全局或组件级别上设置Vue分隔符？
index.html：
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
<script>
const options = {
moduleCache: {
vue: Vue,
},
getFile(url) {
return fetch(url).then(response => {
if (response.ok) {
return response.text()
} else {Promise.reject(response)}
} );
},
addStyle(styleStr) {
const style = document.createElement('style');
style.textContent = styleStr;
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
log(type, ...args) {
console.log(type, ...args);
}
}
const { loadModule, version } = window["vue3-sfc-loader"];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options)),
},
template: `Hello <my-component></my-component>`,
});
app.mixin({ delimiters: ['[[',']]'] }); // this was expected to set the global delimiters
app.mount('#app');
</script>
</body>
</html>myComponent.vue：
<template>
<span class="example">[[msg]]</span>
</template>
<!-- this works: <span class="example">{% verbatim %}{{ msg }}{% endverbatim %}</span> -->
<script>
export default {
data () {
return {
msg: 'test!', // I can inject a value from django backend here with '{{ msg }}'
color: 'blue', // I can inject a value from django backend here with '{{ color }}'
}
}
}
</script>
<style scoped>
.example {
color: v-bind('color');
}
{% include "morestyle.css" %}
</style>urls.py：
from django.urls import path
from . import views
urlpatterns = [
path('', views.base_component),
path('myComponent.vue', views.specific_component),
]views.py：
from django.shortcuts import render
def base_component(request):
return render(request, 'vuetest/index.html')
def specific_component(request):
color = 'blue'
msg = 'mesage fom backend'
return render(request,
'vuetest/components/myComponent.vue',
context={'color': color,
'msg': msg})回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-25 23:13:41
对于任何感兴趣的人。该问题已在vue3-sfc-loader的0.2.22版本中得到解决，请参阅discussion和reference。
Stack Overflow用户
发布于 2021-01-18 18:24:26
您可以全局更改vue3中的delimiters，如下所示
Vue.createApp({
// Delimiters changed to ES6 template string style
delimiters: ['${', '}']
})这应该可以解决您的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65766903
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号