Question

我希望这是一个非常简单的问题：我想在VueJS中链接组件内的组件。

到目前为止我所拥有的：

create.js （将使用webpack呈现给create.min.js）

var Vue = require('vue')
var App = require('./components/App.vue')
var Language = require('./components/Language.vue')
var vm = new Vue(App,'#app')

组件/ App.vue

<template>
  <h1>Create!</h1>
  <ss-lang></ss-lang>
  <pre>
    {{ $data | json }}
  </pre>
</template>

<script>
    module.exports = {
        name : 'Create',
        components : {
        'ss-lang' : new Language()
        }
    }
</script>

组件/ Language.vue

<template>
  <select v-model="selectedLanguage">
    <option v-for="language in languages" v-bind:value="language.value">
      {{ language.name }}
    </option>
  </select>
</template>

<script>
module.exports = {
  name : 'Language',
  data : function(){
    return {
      selectedLanguage : '',
      languages : [
        {value: 'be_en', name: 'English'},
        {value: 'be_fr', name: 'Français'},
        {value: 'be_de', name: 'Deutsch'},
        {value: 'be_nl', name: 'Nederlands'},
        {value: 'be_es', name: 'Español'}
      ]
    }
  }
}
</script>

当我在浏览器中打开时，我收到“Uncaught TypeError：Language is not function”的消息。我希望通过将'ss-lang'连接到语言就足以连接（因为我在create.js中添加了语言）。

我做错了什么？（例如，我错过了哪一部分文件？）

Answer 1

您应该在 App.vue 中导入语言组件。在您的示例中，它仅在 create.js ：

的上下文中导入

//App.vue
<script>
    var Language = require('./relative-path-to-the-component/Language.vue')
    module.exports = {
        name : 'Create',
        components : {
        'ss-lang' : Language
        }
    }
</script>

VueJS - 组件内的组件

1 个答案: