在VueJs项目中使用外部VueJS组件

Question

我正尝试在一个VueJS项目中使用VueStrap，看起来webpacker可以很好地加载它，我可以在终端输出中看到这一点，但是，当我尝试使用vue-strap中的组件时，我得到了这个错误：

[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作为组件包含在Vue实例中，但无法使其正常工作。如何正确地将VueStrap作为组件包含到中？

谢谢!

这是我的application.js：

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')
})

这是我的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

请参阅documentation on complication scope，特别是：

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。

您的模板包含input和mask属性，但您的data函数不会设置这些属性。它们需要设置和响应，所以如果它们发生变化，Vue可以将它们向下传递给子组件(看起来就像您的bs-input组件公开了一个input和mask属性)。