VUE如何从方法中将值传递给变量

<template>
  <div>
    <button @click="updateValue">更新变量的值</button>
    <p>{{ myVariable }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myVariable: ''
    };
  },
  methods: {
    updateValue() {
      this.myVariable = '新的值';
    }
  }
};
</script>

// 父组件
<template>
  <div>
    <child-component :my-prop="myVariable"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      myVariable: ''
    };
  },
  components: {
    ChildComponent
  }
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <button @click="updateValue">更新变量的值</button>
    <p>{{ myProp }}</p>
  </div>
</template>

<script>
export default {
  props: ['myProp'],
  methods: {
    updateValue() {
      this.$emit('update:myProp', '新的值');
    }
  }
};
</script>

// 父组件
<template>
  <div>
    <child-component @update-value="updateVariable"></child-component>
    <p>{{ myVariable }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      myVariable: ''
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    updateVariable(newValue) {
      this.myVariable = newValue;
    }
  }
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <button @click="updateValue">更新变量的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateValue() {
      this.$emit('update-value', '新的值');
    }
  }
};
</script>