Question

我正在尝试将一个测试组件（它仅包含一个<h1>和一些文本）导入另一个组件，但是出现此错误： [Vue warn]: Unknown custom element: <EditMachine> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我尝试在Chrome DevTools的“网络”标签中运行“禁用缓存”选项，我已经命名了这两个组件，并且已经命名了索引组件。

<EditMachine>组件的外观如下：

export default {
  name: "EditMachine",
  data() {
    return {};
  }
};
</script>
And here's how the parent component looks like:
import EditMachine from "./EditMachine.vue";
export default {
  name: "MachineProfiles",
  data: () => ({
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ],
    components: {
        EditMachine
    },


Can someone help or at least point me in the right direction? Thanks in advance!

Answer 1

您有一个错字，应该在组件范围内定义components属性，但是您将其放在data()内

export default {
  name: "MachineProfiles",
  data: () => ({
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ],
  },
  components: {
      EditMachine
  },
}

Answer 2

我认为这是根据您提供给我们的代码判断的语法错误。

export default {
  name: "MachineProfiles",
  data: () => ({
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ], // <-- Missing closing brackets
    components: {
        EditMachine
    },

尝试

export default {
  name: "MachineProfiles",
  data() {
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ],
  },
  components: {
      EditMachine
  },
  ...

将子组件导入父Vue.js

2 个答案: