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>

另外，您可以参考this以获得有关套管的见解。

Answer 2

将所有内容保留在更新后的示例中，除了在 HTML 中将“ myVarName”更改为“ my-var-name”以外-Vue默认完成此操作，并且在js中，您可以使用camelCased版本为myVarName。

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

2 个答案: