propsで渡した値を子コンポーネント内で変更する方法

Question

「Vue.js」において、親コンポーネントから子コンポーネントへ渡した変数の値を子コンポーネントで変更した場合コンソールにエラー(warning)が表示されてしまうのですが、こちらについて少々お聞きしたい部分があり質問させて貰いました。
エラー内容で検索をかけた所、こちらQiita記事など複数の記事がヒットした為、拝見させて頂いたのですが、少々解決したい用件とは異なっていました。
自分は、親コンポーネントに値を返すのではなく、子コンポーネント内でデータを変更しそのコンポーネント内のみで使用する形を考えていました。
その為、.syncやcomputedで、$emit()しない為、こちらは適切ではないのかなと考えています。
値を変更し、使用することのみで考えた際に何か良い方法がありましたら、教えて頂けましたら幸いです

※追記
以下は親コンポーネントになります

<template>
  <div>
    <!-- 子テンプレートを呼び出し、プロパティvalueで変数msgを共有 -->
    <Chiled :testData="testData />


  </div>
</template>

<script>
import Chiled from "./Chiled" 

export default {
  components:{
    hiled  //子テンプレをタグとして使えるようにする
  },
  data(){
    return{
      testData:false
    }
  }
}
</script>

以下は子コンポーネントになります

<template>
  <!-- 渡すテンプレート -->
  <div>
    <p v-if="testData">test</p>
<form action="" method="get" v-on:submit.prevent="submit">
          <button
            class="btn"
            type="submit"

          >
            
          </button>
        </form>
  </div>
</template>

<script>
export default {
  props:{
     testData{
        type:boolean,
        require:false,
        default:null
      },
  },
methods: {
      // 再取得ボタンからのリクエスト
      submit() {
        this.testData = false;
      }
      }
}
</script>

Comments

[FKM]

ソースの提示を可能な限りお願いします。
ちなみに、Reactと違ってVueは子コンポーネント内で加工した値を親に渡すことは可能です。

[ruuuu]

> Reactと違ってVueは子コンポーネント内で加工した値を親に渡すことは可能です。
こちらですが、今回は親に渡さずに変更し参照のみする場合はどうすれば良いかなと思い質問させて頂きました。

[ruuuu]

ちょっとコードの方、インデントずれてしまったのですが、追記しました！

[FKM]

warning内容の提示お願いします。

[ruuuu]

警告の内容は、「Avoid mutating a prop directly」こちらのような内容になります。
コードはすぐに作ったので、動かしてはいないのですが、エラーの解消方法というよりかは、変更及び参照のみを目的とした場合は、どうするのがベストなのかなと思い質問させて頂きました

[FKM]

<Chiled :testData="testData />
このダブルクォートの閉じ忘れは関係ありますか？

[ruuuu]

今回は、エラーの解消方法は分かっており、ベストな方法を知りたいといった意味です！

Answer 1

一度、自身のdataとして保存すれば変更してもエラーは出ません。

export default {
  props:{
    testData: {
      type:"boolean",
      require:false,
      default:null
    },
  },
  data(){
    return{
      myTestData: this.testData
    }
  },
  methods: {
    submit() {
      console.log(this.myTestData); //変更前を確認
      this.myTestData = false;
      console.log(this.myTestData); //変更後を確認
    }
  }
}

Comments

[ruuuu]

ご回答ありがとうございます！
dataプロパティに直接、propsの値を紐付けることもできたのですね。
勉強になりました。