vue-loader动态组件列表

Question

我是 Vue.js 的新手，遇到了一个不难解决的问题：我有一个文件组件 (.vue) 应该 view/manage通过 JS 的另一个单个文件组件的动态列表。

我的做法是这样的：

<script>
import Event from './DayView/Event'
export default {
  components: {
    Event
  },
  props: ['day']
}

const $ = window.$ = require('jquery')
$(document).ready(function () {
  $('#day-view').append(new Event())
})
</script>

这会导致以下错误：

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__DayView_Event___default.a is not a constructor

提前致谢。

Answer 1

见https://vuejs.org/v2/api/

<template><div><event /></div></template>
<script>
import Event from './DayView/Event'
export default {
  components: {
    Event
  },
  props: ['day']
}
</script>

Answer 2

我找到了解决我的问题的方法（不一定要安装新对象）。由于 DayView 应该查看 Event 的列表，因此使用对象列表与 v-for 相结合对我有用：

<template>
  <div id="day-view">
    [...]
    <event v-for="event in events" :event="event"></event>
  </div>
</template>

<script>
import Event from './DayView/Event'

let events = []

export default {
  components: {
    Event
  },
  data () {
    return {
      events: events
    }
  }
}

const $ = window.$ = require('jquery')
$(document).ready(function () {
  events.push({start: '540', end: '630'})
})
</script>

vue-loader动态组件列表

Vue-loader dynamic list of components

javascript

vue.js

vue-loader