将价值从父母传递给孩子不起作用

Question

Using Vuu.js, I'm trying to pass a value from parent to child component. I have this working fine with a provided example. But when I change the name, it stops working. I can't figure out what i'm doing wrong. My understanding on props is limited, i'm still trying to get me head around it.

Working Example:

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'
    }
  }
});

Non Working Example:

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

In your parent template

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

replace

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

with

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

Additionally you can refer this to get insights of casing.

Answer 2

保留更新示例中的所有内容，除了在HTML中将“myVarName”更改为“my-var-name” - 这是默认情况下由 Vue 完成的，在 js 中，您仍然可以使用驼峰式版本 myVarName。