在Django模板中加入VueJs组件。

Question

我正在做一个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在页面加载时启动并控制。

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