将 VueJs 组件添加到 Django 模板中答案

【问题标题】：Sprinkling VueJs components into Django templates将 VueJs 组件添加到 Django 模板中
【发布时间】：2020-07-22 20:19:45
【问题描述】：

我正在开发一个 Django 站点，我希望将一些 Vue 组件“洒”到 Django 呈现的模板中。我在单个存储库中工作，并设置了 webpack 来创建我在 Django 模板中使用的样式/js 包。

我正在努力让功能按我的意愿工作，主要是关于无渲染的 Vue 组件，因为我想处理 Django 模板中的所有（或至少绝大多数）html 并且只使用 Vue 组件对于某些地方的一些逻辑。

我正在使用来自here 的一些建议，但它并没有像他们建议的那样工作（尽管这正是我希望它可以工作的方式），我觉得我需要利用范围插槽。

我正在使用 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 组件中定义的任何数据值、方法和计算属性。我通过在返回 this.$scopedSlots.default({...allOfTheThingsINeed}) 的组件中定义一个 render 函数然后在 <renderless-component> 内的所有标记周围添加一个 <template v-slot="slotProps"> 包装器来完成这项工作，但由于需要访问很多内容，这似乎很笨拙数据值和方法，并且必须在 render 函数中重新定义它们。有没有办法解决这个问题？

我也无法访问在 Django 模板中的元素上定义的 $refs。就 Vue 而言，它们都是 undefined，所以我不确定我在那里缺少什么。

这些是我目前似乎在使用此配置时面临的主要问题。我本质上希望能够在没有任何模板的情况下编写 Vue 组件文件，而是在我的 Django 模板中编写模板标记，并在页面加载时启动 Vue 并进行控制。

任何人都可以提供任何帮助，我们将不胜感激。

【问题讨论】：

标签： javascript django vue.js vuejs2 django-templates

【解决方案1】：

如果你想在 Django 中使用 Vue 组件，试试这个教程

https://blog.xoxzo.com/2020/08/05/vue-with-django-getting-started/

但是，如果您只想使用 Vue 操作 Django HTML，只需使用 Vue inline-template

【讨论】：

【解决方案2】：

如果你想在 vue 组件中使用 someValue，你应该通过 props 传递值，你可以看看这个 repo django-vue

template index.html可以看到msg0和msg1是如何传入vue组件的

index.js

{% render_bundle 'index' %} 行包含编译后的 index.js，定义为 here

【讨论】：