VueJS 프로젝트에서 외부 VueJs 구성 요소 사용

Question

VueJS 프로젝트에서 VueStrap을 사용하려고합니다. webpacker가 제대로로드하는 것처럼 보이지만, 터미널 출력에서 ​​볼 수 있습니다. 그러나 구성 요소를 사용하려고하면 VUE 스트랩은이 오류를 얻을 :

[Vue warn]: Property or method "input" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. 

내가 뷰 인스턴스의 구성 요소로 VueStrap을 포함하여 시도했지만 작동시킬 수 없습니다. VueStrap을 구성 요소로 올바르게 포함하려면 어떻게합니까?

감사합니다.

이

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

귀하의 템플릿 input을 포함한다 : 이것은 특히, documentation on complication scope 참조하십시오 내 app.vue 파일

<template> 
    <div id='app'> 
    <p> {{ message }} </p> 
    <bs-input :value.sync="input" label="Username" help="Only allows lowercase letters and numbers." 
    error="Insert username" placeholder="Username can't start with a number." pattern="^[a-z][a-z0-9]+$" 
    :mask="mask" minlength="5" readonly required icon> 
    </bs-input> 
    </div> 
</template> 


<script> 
    export default { 
    data: function() { 
     return { 
     message: "Hello World"   
     } 
    } 
    } 
</script> 



<style scoped> 
    p { 
    font-size: 2em; 
    text-align: left; 
    } 
</style> 

Answer 1

입니다

import Vue from 'vue/dist/vue.js' 
import App from '../components/app.vue' 
import VueStrap from 'vue-strap' 


document.addEventListener('DOMContentLoaded',() => { 
    document.body.appendChild(document.createElement('app')) 
    const app = new Vue({ 
    el: 'app', 
    template: '<App/>', 
    components: { App } 
    }) 

    console.log('app') 
}) 

:

이

내 application.js입니다 및속성이지만 mask 속성기능이이 기능을 설정하지 않습니다. 그들은 설정하고 반응해야하므로 변경할 경우 Vue는 하위 구성 요소로 전달할 수 있습니다 ( bs-input 구성 요소는 input 및 mask 속성을 나타냄).