我懷疑 Vue 中是否有辦法與道具做同樣的事情，但以相反的方式。讓我解釋一下，例如，我有以下內容：
const app = Vue.createApp({
data: function() {
return {
text: "Hola"
}
},
template: `<div>
<child-input v-model:text="text"></child-input>
<input v-model="text" />
{{text}}
</div>`
})
在這里，如果我在子輸入組件中定義一個名為“text”的道具，我將擁有與外部完全相同的值。像這樣的東西：
const childInput = {
data() {
return { input: '' }
},
props : ['text'],
template: '<input type="text" v-model="outsideInput">',
created() {
this.input = this.text
}
}
如果我現在在“文本”變數上定義一個觀察者來改變輸入的值，它確實會改變。但是現在我想做相反的事情，當childInput（變數“輸入”）的輸入發生變化時，也將這種變化傳播到外部輸入。
uj5u.com熱心網友回復：
您可以從孩子發出事件并更新道具：
const app = Vue.createApp({
data: function() {
return {
text: "Hola"
}
},
template: `<div>
<child-input @text-changed="updateText" v-model:text="text"></child-input>
<input v-model="text" />
{{text}}
</div>`,
methods: {
updateText(val) {
this.text = val
}
}
})
app.component('childInput', {
props : ['text'],
template: '<div> child <input type="text" v-model="input"></div>',
computed : {
input: {
get(){
return this.text
},
set(newValue) {
this.$emit('textChanged', newValue)
}
}
},
})
app.mount("#demo")<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/469262.html
標籤：javascript Vue.js 遗产 Vue组件