在Django模板中加入VueJs组件。

最后发布: 2020-08-03


问题

我正在做一个Django网站,我想在Django渲染的模板中加入一些Vue组件。我在一个单一的仓库中工作,并设置了webpack来创建stylejs bundles,我在Django模板中使用。

我正在努力实现我想要的功能,主要是关于无渲染的Vue组件,因为我想在Django模板中处理所有(或至少是绝大部分)html,而只是在一些地方使用Vue组件处理一些逻辑。

我正在使用一些来自 此处 但它并没有像他们建议的那样工作(尽管这正是我希望它能工作的方式),我觉得我需要利用scoped-slots。

我正在使用Vue esm发行版来包含Vue编译器。

我目前使用的设置如下。

// webpack_entrypoint.js
import Vue from "vue";
import RenderlessComponent from "./components/RenderlessComponent.vue"

// I will also be registering additional components here in future for other pages
// and I'm under the impression that doing it this way allows me to reuse the Vue instance
// defined below
Vue.component("renderless-component", RenderlessComponent)

new Vue({
    el: "#app"
})
// components/RenderlessComponent.vue
<template></template>
<script>
// Other 3rd party components to use in the template
import Autocomplete from "@trevoreyre/autocomplete-vue";  

export default {
    components: {
        Autocomplete
    },
    data() {
        return {
            modalOpen: false
            someValue: ""
        }
    },
    methods: {
        toggleModal() {
            this.modalOpen = !this.modalOpen
        }
    },
    computed: {
        selectedValue() {
            // use refs defined in the Django template
            return this.$refs.autocomplete.value + '/extra/stuff'
        }
    }
}
</script>
<!-- templates/some_django_template.html -->
<!-- import js bundle etc -->

<div id="app">
    <renderless-component>
        <h1>I want to be able to use {{someValue}} here</h1>
        <div>
            Lots of other markup within this component
            As well as using other components defined in RenderlessComponent

            //also want to be able to use refs
            <autocomplete ref="autocomplete"></autocomplete>
        </div>
        <button @click="toggleModal">
        <div v-if="modalOpen">
            Some modal content
        </div>
    </renderless-component>
    <p>
        Other content outside of the component
    </p>
</div>

问题是...

我无法从Django模板中访问Vue组件中定义的任何数据值、方法、计算属性。我通过在Vue组件中定义一个 render 组件中的函数,该函数返回 this.$scopedSlots.default({...allOfTheThingsINeed}) 然后加一个 <template v-slot="slotProps"> 中的所有标记的包装器。<renderless-component> 但由于需要访问大量的数据值和方法,而且必须要在 render 功能。有什么办法解决这个问题吗?

我也无法访问 $refs 定义在Django模板中的元素上。它们都是 undefined 就Vue而言,所以我不知道我在那里错过了什么。

这些是我目前看来这个配置面临的主要问题。我基本上希望能够在没有任何模板的情况下编写Vue组件文件,而是在我的Django模板中编写模板标记,让Vue在页面加载时启动并控制。

如果有人能提供帮助,我将非常感激。

javascript django vue.js vuejs2 django-templates
回答

如果你想使用 someValue 在vue组件里面,你应该通过道具来传递值,你可以看一下这个repo。django-vue

模板index.html 可见 msg0msg1 传入vue组件

的一行

这一行 {% render_bundle 'index' %} 是为了包含编译后的index.js,定义了 此处