передача значения от родителя к ребенку не работает

Question

Используя Vuu.js, я пытаюсь передать значение из родительского в дочерний компонент.У меня это работает нормально с предоставленным примером.Но когда я меняю имя, оно перестает работать.Я не могу понять, что я делаю неправильно.Мое понимание работы с реквизитом ограничено, я все еще пытаюсь заставить меня задуматься.

Рабочий пример:

https://codepen.io/sdras/pen/788a6a21e95589098af070c321214b78

HTML

<div id="app">
  <child :text="message"></child>
</div>

JS

Vue.component('child', {
  props: ['text'],
  template: `<div>{{ text }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

Неработающий пример:

HTML

<div id="app">
  <child :myVarName="message"></child>
</div>

JS

Vue.component('child', {
  props: ['myVarName'],
  template: `<div>{{ myVarName }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

Answer 1

В родительском шаблоне

<div id="app">
  <child :myVarName="message"></child>
</div>

замените

<child :myVarName="message"></child>

на

<child :my-var-name="message"></child>

Кроме того, вы можете обратиться к этому , чтобы получить представлениеобсадной трубы.

Answer 2

Оставьте все как есть в вашем обновленном примере, КРОМЕ в HTML измените «myVarName» на «my-var-name» - это делается по умолчанию Vue, а в js вы можете использовать camelCasedверсия myVarName еще.