When you include value="Some value..." in your template, it means that the input will initially display "Some value...". To ensure that the input's value is dynamically linked to a data property on the component, you should use v-model for two-way binding (where changes in the input value update the data property and vice versa).
In this scenario, where you need the input's value from the root component, the <simple-input> component must make this accessible. This can be achieved through props for passing data from parent to child, and events for passing data back up from child to parent.
Here's an untested example:
Vue.component('simple-input', {
template: `
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
`,
props: ['value'],
});
<div id="root">
<simple-input v-model="value1"></simple-input>
<simple-input v-model="value2"></simple-input>
<simple-input v-model="value3"></simple-input>
<button @click="alertSimpleInput1">Show first input value</button>
<button @click="changeInput1('new value')">Change input value</button>
<button @click="alertSimpleInput2">Show second input value</button>
</div>
new Vue({
el: '#root',
data: {
value1: 'Initial value 1',
value2: 'Initial value 2',
value3: 'Initial value 3',
},
methods: {
alertSimpleInput1() {
alert(this.value1);
},
alertSimpleInput2() {
alert(this.value2);
},
changeInput1(newValue) {
this.value1 = newValue;
},
},
});
While I see you're still getting familiar with Vue, these concepts may seem overwhelming at first. There are plenty of resources available for further understanding.
Take some time to explore: