django 套vue 模板_将VueJs组件添加到Django模板中

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

// 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'

}

}

}

I want to be able to use {{someValue}} here

Lots of other markup within this component

As well as using other components defined in RenderlessComponent

//also want to be able to use refs

Some modal content

Other content outside of the component

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 wrapper around all of the markup inside of 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.

解决方案

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

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