While using Vuu.js, I encountered an issue with passing a value from parent to child component. Initially, I had it working perfectly with a provided example. However, as soon as I tried changing the name, the functionality broke. I'm struggling to understand where I'm going wrong. My knowledge on props is limited, and I'm still trying to wrap my head around it.
Example That Works:
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'
}
}
});
Example That Doesn't Work:
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'
}
}
});