Vue 파일 내에 루트 Vue 인스턴스 생성

Vue 파일 내에 루트 Vue 인스턴스 생성

에 대한 방법이 있을까요?.vue단일 파일 컴포넌트 패턴으로 자체 Vue 인스턴스를 만드는 데 필요한 파일입니까?

여기 Vue 파일이 있습니다.

// MyComponent.vue
<template><div>Hello {{ name }}!</div></template>

<script>
const Vue = require('vue');

// what would usually be exports default
const componentConfig = {
    name: "my-component",
    props: {
        name: String,
    },
};

function create(el, props) {
    const vm = new Vue({
        el,
        render(h) {
            return h(componentConfig, { props });
        });
    vm.$mount();
    return vm;
}

module.exports = { create };
</script>

다음으로 일부 JS 파일의 사용 예를 나타냅니다.

// index.js
const MyComponent = require('./MyComponent.vue');

const el = '.container';
const props = {
    name: 'Jess',
};

MyComponent.create(el, props);
</script>

---

이 경우 템플릿을 찾을 수 없다는 오류가 나타납니다.

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <MyComponent>
       <Root>

본능적으로 Vue 컴파일러가 위에서 선언한 템플릿을 참조하고 싶은 (스크립트 태그 내에서) 마법처럼 추론할 수 있는 방법을 이해할 수 없습니다.그래서...네, 제가 왜 이걸 할 수 없는지에 대한 설명이나, 어떻게 작동시킬 수 있을지에 대한 생각이 있나요?

설명하신 내용은 Webpack 및 Vue Loader를 통한 사전 컴파일 단계에서 이루어집니다.Vue 컴파일러는 실제로 단일 파일 구성 요소를 구문 분석하지 않습니다.Vue 컴파일러는 컴포넌트 옵션오브젝트에 제공되는 템플릿을 해석할 수 있습니다.이 때문에,template의 옵션componentConfig오브젝트가 동작합니다.그렇지 않으면 Webpack 및 Vue Loader를 사용하여 컴파일 전 단계를 수행하여 단일 파일 컴포넌트의 템플릿을 해석해야 합니다.그러기 위해서는 사양에 정의되어 있는SFC 구조에 준거할 필요가 있습니다.여기 발췌본이 있습니다.

템플릿

• 각각*.vue파일에는 최대 1개까지 포함할 수 있습니다.<template>한 번에 막다
• 컨텐츠가 추출되어 에 전달됩니다.vue-template-compilerJavaScript 렌더 함수에 사전 컴파일되어 마지막으로 내보낸 컴포넌트에 삽입됩니다.<script>부분.

대본

• 각각*.vue파일에는 한 번에 최대 1개의 블록을 포함할 수 있습니다.
• 스크립트는 ES 모듈로 실행됩니다.
• 기본 내보내기는 Vue.js 구성 요소 옵션 개체여야 합니다.에 의해 작성된 확장 생성자 내보내기Vue.extend()또한 지원되지만 플레인오브젝트를 권장합니다.
• 에 일치하는 웹 팩 규칙.js파일(또는 에 의해 지정된 확장자)langattribute)는, 의 컨텐츠에 적용됩니다.<script>블록도 마찬가지입니다.

---

구체적인 예를 사용하려면 다시 쓸 수 있습니다.main.js이렇게 줄서다

const MyComponent = require("./MyComponent.vue");

const el = ".container";
const data = {
  name: "Jess"
};

MyComponent.create(el, data);

그리고 당신의MyComponent.vuefile (이것은 private compute와 같은 것입니다)js파일명을 @Ferrybig로 합니다.) ..

<script>
const Vue = require('vue');

function create(el, data) {
  const componentConfig = {
    el,
    name: "my-component",
    data,
    template: `<div>Hello {{ name }}!</div>`
  };
  const vm = new Vue(componentConfig);
  return vm;
}

module.exports = { create };
</script>

이 CodeSandbox 참조

또는 렌더링 기능을 선호하는 경우MyComponent.vue이렇게 될 것이다.

<script>
const Vue = require('vue');

function create(el, data) {
  const componentConfig = {
    el,
    name: "my-component",
    data,
    render(h) { return h('div', 'Hello ' + data.name) } 
  };
  const vm = new Vue(componentConfig);
  return vm;
}

module.exports = { create };
</script>

코드 샌드박스

---

마지막으로 기억해야 할 것은 다음과 같습니다.모든 구성 요소에서 템플릿 또는 렌더 함수 중 하나를 사용할 수 있지만 예제에서처럼 둘 다 사용할 수는 없습니다.둘 중 하나가 다른 하나를 덮어쓰기 때문입니다.예를 들어 JSFiddle Vue 보일러 플레이트를 참조하여 렌더 함수를 추가하면 템플릿이 어떻게 재정의되는지 확인하십시오.이것으로 에러가 발생하고 있는 것을 알 수 있습니다.렌더 함수가 우선되었지만 렌더링할 템플릿을 제공하지 않는 구성 요소의 옵션 개체를 해당 개체에 제공했습니다.

실제 솔루션에 매우 가깝지만, 모든 것을 조합할 수 있는 몇 가지 "접착" 부품만 누락되어 있습니다.

<template>
    <div>Hello {{ name }}!</div>
</template>
<script>
    import HelloWorld from "./components/HelloWorld";
    import Vue from "vue";

    const Component = {
        // Add data here that normally goes into the "export default" section
        name: "my-component",
        props: {
            name: String,
        },
        data() {
            return {
            };
        },

    };
    Component.create = function(el, props) {
        const vm = new Vue({
            el,
            render(h) {
                return h(Component, { props });
            },
        });
        vm.$mount();
        return vm;
    };
    export default Component;
</script>

다른 파일에서는 다음과 같이 사용할 수 있습니다.

import App from "./App";
App.create("#app", {
    name: 'Hello World!',
});

코드 및 상자의 예: https://codesandbox.io/s/m61klzlwy

언급URL : https://stackoverflow.com/questions/52882583/creating-the-root-vue-instance-inside-of-a-vue-file