VueJS - 组件中的组件

Question

我希望有一个非常简单的问题：我想 link 来自 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')

components/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>

components/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 a function" 的消息。我希望通过将 'ss-lang' 连接到语言就足以连接（因为我在 create.js 中添加了语言）。

我做错了什么？（例如，我缺少文档的哪一部分？）

Answer 1

您应该在 App.vue 中导入 Language 组件。在您的示例中，它仅在 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 - 组件中的组件

VueJS - Components within components

javascript

vue.js