如何反向修改道具的价值

Question

我对 Vue 中是否有办法以相反的方式做与 prop 相同的事情有疑问。让我解释得更好一点，例如，我有以下内容：

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>`
})

在这里，如果我在子输入组件中定义一个名为“文本”的道具，我将拥有与外部完全相同的值。像这样：

const childInput = { 
data() { 
    return { input: '' }
  },
  props : ['text'],
  template: '<input type="text" v-model="outsideInput">',
  created() {
    this.input = this.text
  }
}

如果我现在在“text”变量上定义一个观察者来改变输入的值，它确实会改变。但现在我想做相反的事情，当 childInput（变量“输入”）的输入发生变化时，将此变化也传播到外部输入。

Answer 1

您可以从 child 发出事件并更新属性：

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>

如何反向修改道具的价值

How to inverse modify value of a prop

javascript

inheritance

vue.js

vue-component