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-compiler
JavaScript 렌더 함수에 사전 컴파일되어 마지막으로 내보낸 컴포넌트에 삽입됩니다.<script>
부분.
대본
구체적인 예를 사용하려면 다시 쓸 수 있습니다.main.js
이렇게 줄서다
const MyComponent = require("./MyComponent.vue");
const el = ".container";
const data = {
name: "Jess"
};
MyComponent.create(el, data);
그리고 당신의MyComponent.vue
file (이것은 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
'programing' 카테고리의 다른 글
maven build가 실패한 지점부터 시작할 수 있습니까? (0) | 2022.09.03 |
---|---|
vuex에서 registerModule/unregisterModule을 사용하는 동안 메모리 누수가 발생함 (0) | 2022.09.03 |
Gradle은 tools.jar를 찾을 수 없습니다. (0) | 2022.09.03 |
이클립스:클래스 이름 자동 완성 시 특정 패키지 제외 (0) | 2022.09.03 |
ClassNotFoundException 해결방법 (0) | 2022.09.03 |