Sprinkling VueJs components into Django templates

问题

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.

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.

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>

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?

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.

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.

回答1:

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

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

index.js

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

来源：https://stackoverflow.com/questions/61134270/sprinkling-vuejs-components-into-django-templates

标签

javascript

django

Vue.js

vuejs2

django-templates