将VueJs组件添加到Django模板中 [英] Sprinkling VueJs components into Django templates

问题描述

我正在Django网站上工作，我希望将一些Vue组件散布到Django呈现的模板中。我正在一个单一的存储库中工作，并具有webpack设置来创建在Django模板中使用的样式/ js包。

I'm working on a Django site and I'm looking to "sprinkle" in some Vue components to the Django rendered templates. I'm working in a single repository and have webpack setup to create style/js bundles that I use within the Django templates.

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

I'm struggling to get the functionality working how I'd like it, mainly regarding renderless Vue components, since I want to handle all (or at least the vast majority) of html within the Django templates and just use Vue components for some logic in some places.

我正在使用，但是它并没有按照他们的建议进行工作（尽管这正是我希望它可以工作的方式），我觉得我需要利用作用域插槽。

I'm using some of the advice from here but it didn't quite work as they'd suggested (although that's exactly how i'm hoping it can work) and I feel like I need to take advantage of scoped-slots.

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

I am using the Vue esm distribution to include the Vue compiler.

我当前使用的设置如下：

The setup I'm currently using is as follows:

// 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 函数来实现此目的/ code>，然后在<内的所有标记周围添加<模板v-slot = slotProps> 包装器; renderless-component> ，但由于需要访问许多数据值和方法，并且不得不在 render 函数中重新定义它们，因此它看起来似乎很笨拙。 。可以解决这个问题吗？

The problems

I'm unable to access any of the data values, methods, computed properties defined in the Vue component from within the Django template. I sort of got this working by defining a render function within the component which returned this.$scopedSlots.default({...allOfTheThingsINeed}) and then adding a <template v-slot="slotProps"> wrapper around all of the markup inside of <renderless-component> but it seems unweildy due to needing access to a lot of data values and methods and having to redefine them in the render function. Is there a way around this?

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

I'm also unable to access the $refs defined on elements within the Django template. They're all undefined as far as Vue is concerned, so I'm not sure what I'm missing there.

这些是我目前与此配置似乎面临的主要问题。我本质上希望能够编写Vue组件文件而无需任何模板，而是在Django模板中编写模板标记，并在页面加载时启动Vue并获得控制权。

Those are the main issues I seem to be facing with this configuration at the moment. I essentially want to be able to write Vue component files without any templating and instead write the template markup in my Django templates instead and have Vue boot-up at page load and take control.

任何人都能提供的帮助将不胜感激。

Any help that anyone can offer would be greatly appreciated.

推荐答案

如果要使用在vue组件中添加someValue ，您应该通过props传递值，您可以查看此仓库 django-vue

if you want to use someValue inside vue component, you should pass the value by props, you can take a look at this repo django-vue

模板index.html 您可以看到 msg0 和 msg1 传递到Vue组件

template index.html you can see how msg0 and msg1 pass into the vue component

index.js

该行 {％render_bundle'index'％} 包括编译的index.js，在此处定义

the line {% render_bundle 'index' %} is to include the compiled index.js, defined here

这篇关于将VueJs组件添加到Django模板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！