Импорт дочернего компонента в родительский Vue.js - PullRequest
Новая
       13

Импорт дочернего компонента в родительский Vue.js

0 голосов
/ 14 мая 2019

Я пытаюсь импортировать тестовый компонент (он просто содержит <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, я назвал оба компонента и назвал свой компонент Index.

Вот как выглядит компонент <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!

Ответы [ 2 ]

4 голосов
/ 14 мая 2019

У вас есть опечатка, свойство 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
  },
}
2 голосов
/ 14 мая 2019

Я думаю, что это синтаксическая ошибка, исходя из кода, который вы нам дали. 

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
  },
  ...
...