I created a simple Vue.js 2 example to test nested components.
Here is the structure of the components and templates:
Vue.component('form-component', {
template: '#form',
props: ['value'],
methods: {
onInput: function (event) {
this.$emit('input', event.target.value);
}
}
});
Vue.component('message-component', {
template: '#message',
data: function () {
return {
msg: 'Hello'
}
},
props: ['user']
});
Vue.component('welcome-component', {
template: '#welcome',
data: function () {
return {
user: 'ahmad'
}
}
});
new Vue({
el: '#container'
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<!--Form Template-->
<template id="form">
<div>
<div class="form-control">
<label>Enter Your Name:</label>
<input type="text" v-bind:value="value" :input="onInput">
</div>
</div>
</template>
<!--Hello Message Template-->
<template id="message">
<div>
<h3>{{msg}} {{user}}</h3>
</div>
</template>
<template id="welcome">
<div>
<form-component :value="value"></form-component>
<br>
<message-component :user="user"></message-component>
</div>
</template>
<div id="container">
<welcome-component></welcome-component>
</div>However, when running the app in the browser, the following error message is displayed:
[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in
---> <WelcomeComponent>
<Root>
What could be the issue?
Update:
I have recreated this Fiddle based on a chapter from Learning Vue.js 2. I made some changes to parameter names, component names, and template names. Interestingly, when I transferred the main fiddle to my code, everything worked as expected.