[英]Vue.js - How to get and set a value of a component input field?
I just started learning Vue.js but I ran into a problem where I can't figure out how I could access and change a text field value that is inside my component.我刚开始学习 Vue.js,但遇到了一个问题,我不知道如何访问和更改组件内的文本字段值。
Let's say I would like to access or change the value of my first input field that is inside my component假设我想访问或更改组件内的第一个输入字段的值
My component我的组件
Vue.component('simple-input',
{
template: `
<input type="text" value="Some value...">
`,
});
HTML HTML
<div id="root">
<simple-input></simple-input>
<simple-input></simple-input>
<simple-input></simple-input>
<div @click="alertSimpleInput1">Show first input value</div>
<div @click="changeInput1('new value')">Change input value</div>
<div @click="alertSimpleInput2">Show second input value</div>
</div>
main.js main.js
new Vue({
el: '#root',
});
Having value="Some value..."
in your template means that the input's value will be set to the string "Some value..." initially.在您的模板中包含value="Some value..."
意味着输入的值最初将设置为字符串“Some value...”。 You need to bind the input's value to a data property on the component.您需要将输入的值绑定到组件上的数据属性。 Use v-model
for a two-way binding (when the input value changes, it will update the value of the data property and vice versa).使用v-model
进行双向绑定(当输入值发生变化时,它会更新数据属性的值,反之亦然)。
In your example there's actually a bit more involved though since you want to obtain the input's value from the root component, therefore the <simple-input>
component must expose this;在您的示例中,实际上涉及更多,因为您想从根组件获取输入的值,因此<simple-input>
组件必须公开它; the way to do this is by using props (for parent-to-child data flow) and events (for child-to-parent data flow).做到这一点的方法是使用道具(用于父子数据流)和事件(用于子父数据流)。
Untested:未经测试:
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;
},
},
});
I understand you're just learning Vue, but there's a lot to unpack here for a beginner.我知道您只是在学习 Vue,但是对于初学者来说,这里有很多东西要解开。 I won't go into detail because there's lots of information about these concepts already.我不会详细介绍,因为已经有很多关于这些概念的信息。
Read the following:阅读以下:
v-model
on Components (for an explanation of the <simple-input>
code) 在组件上使用v-model
(用于解释<simple-input>
代码)you can use $emit method for this purpose.为此,您可以使用 $emit 方法。
<simple-input @clicked="inputValue" :name="name"></simple-input>
parent methods
export default {
data: function () {
return {
name:null
}
},
methods: {
inputValue (value) {
console.log(value) // get input value
}
}
}
Vue.component('simple-input', {
data: function () {
return {
// name:null
}
},
watch:{
'name':function(){
this.$emit('clicked', this.name)
}
template: '<input type="text" v-model="name">'
props:['name']
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.