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

【问题标题】：Using external VueJs components in a VueJS project在 VueJS 项目中使用外部 VueJs 组件
【发布时间】：2023-03-18 02:09:02
【问题描述】：

我正在尝试在 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>

【问题讨论】：

我以前从未使用过 VueStrap，但从文档看来，您应该从组件本身导入您想要使用的任何部分。所以在这种情况下import {bs-import} from 'vue-strap' 在 app.vue 文件中

标签： ruby-on-rails vue.js vuejs2 vue-component vue-strap

【解决方案1】：

请查看documentation on complication scope，特别是：

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

您的模板包含 input 和 mask 属性，但您的 data 函数没有设置这些属性。它们需要进行设置和响应，因此如果它们发生更改，Vue 可以将它们传递给子组件（看起来您的 bs-input 组件公开了 input 和 mask 属性）。

【讨论】：