Django 템플릿에 VueJs 컴포넌트 살포

Django 템플릿에 VueJs 컴포넌트 살포

저는 Django 사이트에서 일하고 있는데 Vue 컴포넌트에서 Django 렌더링 템플릿에 "스프링"하려고 합니다.단일 저장소에서 작업하고 있으며, Django 템플릿 내에서 사용하는 스타일/js 번들을 만들기 위한 웹 팩 설정이 있습니다.

Django 템플릿 내의 모든 HTML(또는 대부분의 HTML)을 처리하고 일부 로직에는 Vue 컴포넌트를 사용하고 싶기 때문에 주로 렌더리스 Vue 컴포넌트에 관한 기능을 원하는 대로 사용하는 데 어려움을 겪고 있습니다.

저는 여기서 몇 가지 조언을 듣고 있지만, 그들이 제안한 대로 잘 되지 않았습니다(그렇게 하고 싶다고 생각하고 있습니다만).그리고 스코프 슬롯을 이용할 필요가 있다고 생각합니다.

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 구성 요소에 정의된 데이터 값, 메서드 및 계산된 속성에 액세스할 수 없습니다.제가 이걸 작동시키려면render반환된 컴포넌트 내의 기능this.$scopedSlots.default({...allOfTheThingsINeed})그 후 a를 추가한다.<template v-slot="slotProps">안에 있는 모든 마크업을 감싸다<renderless-component>그러나 많은 데이터 값과 방법에 대한 접근이 필요하고 데이터 관리에서 이를 재정의해야 하기 때문에 효율적이지 않은 것으로 보입니다.render기능.이 문제를 해결할 방법이 있나요?

또, 다음의 파일에도 액세스 할 수 없습니다.$refsDjango 템플릿 내의 요소에 정의되어 있습니다.모두undefinedVue에 관한 한 제가 뭘 놓쳤는지 모르겠어요

이것이 현재 이 구성에 대해 제가 직면하고 있는 주요 문제인 것 같습니다.기본적으로 템플릿 없이 Vue 컴포넌트 파일을 쓸 수 있고 대신 템플릿 마크업을 Django 템플릿에 쓸 수 있고 페이지 로드 시 Vue 부팅을 제어하고 싶습니다.

아무나 할 수 있는 어떤 도움 부탁드립니다.

사용하고 싶다면someValuevue 컴포넌트 내에서는 소품별로 값을 전달해야 합니다.이 repo django-vue를 보실 수 있습니다.

template index.template 방법 확인msg0그리고.msg1Vue 구성 요소에 전달

index.displaces를 표시합니다.

{% render_bundle 'index' %}여기서 정의되어 있는 컴파일된 index.displaces를 포함하는 것입니다.

Django에서 Vue 컴포넌트를 사용하려면 이 튜토리얼을 사용해 보십시오.

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

, Vue 를 를 는, 「Vue」 「Django HTML」 「Vue」를 해 주세요.inline-template

언급URL : https://stackoverflow.com/questions/61134270/sprinkling-vuejs-components-into-django-templates