How to change parent value from child

[lioutall]

<div @name="parent">
  
  <child :clickDo="callme" />
  <div>parent {abc}</div>

  <script>
    constructor() {
      this.abc = 'AAA'
      console.log(this)
    }

    callme(message) {
      // the child abc will be changed here, but how parent?
      this.abc = 'changed'
    }
  </script>
  
</div>

<button @name="child" @click="clickDo">
  child {abc}
  <script>  </script>
</button>`

[logistor]

When parent object is constructed this.abc points both parent abc and child abc. But when callme get invoked in child object this is bound to child abc.

You can avoid problem with this using arrow function. Parent also needs an update.

<div @name="parent">  
  <child :clickDo="callme" />
  <div>parent {abc}</div>

  <script>
    constructor() {
      this.abc = 'AAA'
    }
    callme = (msg) => {
      this.abc = msg
      this.update()
    }
  </script>
</div>

<button @name="child" @click="click">
  child {abc}
  <script>
    constructor({ clickDo }) {
      this.cb = clickDo
    }
    click() {
      this.abc = 'changed'
      this.cb('changed')
    }
  </script>
</button>