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

【问题标题】：passing value from parent to child not working将价值从父母传递给孩子不起作用
【发布时间】：2019-11-09 08:59:20
【问题描述】：

使用 Vuu.js，我试图将值从父组件传递给子组件。通过提供的示例，我可以正常工作。但是当我更改名称时，它停止工作。我无法弄清楚我做错了什么。我对道具的理解有限，我还在努力解决它。

工作示例：

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

HTML

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

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>

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

在你的父模板中

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

替换

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

与

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

另外，您可以参考this 了解套管。

【讨论】：

谢谢，这解决了问题。它不会允许骆驼案？我需要在文档中进行一些阅读以进一步理解这一点。再次感谢。在允许时将标记为正确。

【解决方案2】：

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

【讨论】：