【Vue.js】親の親からのデータを受け取る場合はどうすればいいですか？

【現状】
パネルの中に２つの入力フォームがある画面で入力データを取得したいです。
現状は、親（全体の画面）ー子（パネル）ー子（入力フォーム）という構造になっています。

以下のようなエラーが出ており、おそらく受け渡し方法が間違えていると思います。

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "place"

複数にまたがるコンポーネントのデータ受け渡し方法についてどなたかご教授いただけないでしょうか。
回答いただけると助かります。

全体の画面

：
<div class="">
    <place-detail-panel
    :place="overviewForm.place"
    :content="overviewForm.content"
    v-model="overviewForm"
    @addPlacePanel="addPlacePanel()"
    ></place-detail-panel>
</div>
：
   data() {
        return {
            overviewForm: [
                { place: '', content: '' }
            ]
        }
    },
    methods: {
        addPlacePanel() {
            this.overviewForm
            console.log(this.overviewForm, 'overviewForm')
        }
    }

子（パネル）

    <div>
        <div class="w-7/12 bg-white m-auto rounded-lg border shadow-xl p-6 h-auto">
            <!-- クリアボタン -->
            <div class="pb-3">
                <a href="#">
                    <i class="fas fa-times float-right text-gray-500 hover:text-red-600"></i>
                </a>
            </div>
            <!--  -->
            <compose-i-f name="place" label="場所" placeholder="場所を入力してください" v-model="place"/>
            <compose-content name="content" label="詳細" placeholder="詳細を入力してください" v-model="content"/>
            <div class="pt-3 ml-8 clearfix">
                <button @click="$emit('addPlacePanel')" class="float-right bg-blue-500 px-3 py-2 rounded-full text-white border border-gray-600 hover:bg-blue-300">項目を追加</button>
            </div>
        </div>
    </div>

<script>
import ComposeIF from '../molecules/ComposeInputField.vue';
import ComposeContent from '../molecules/BMoverviewTextarea.vue';

export default {
    components: {
        ComposeIF,
        ComposeContent
    },
    props: {
        place: String,
        content: String
    }
}
</script>

子（入力フォーム）

    <div class="relative pt-4 px-4">
        <label :for="name" class="text-xs text-blue-400 font-bold absolute pt-2">{{ label }}</label>
        <input @input="updateValue" :id="label" type="text" class="border-b pt-8 w-full focus:outline-none focus:border-blue-400" :placeholder="placeholder">
    </div>

<script>
export default {
    props: {
        name: String,
        label: String,
        placeholder: String
    },
    methods: {
        updateValue: function(e) {
            this.$emit("input", e.target.value);
        }
    }
}
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

上のnt4cさんと同じく、まずpropは直接変更が不可能です。
dataなど、何かしら別の変数に落としてあげないと変更ができないです。

個人的には公式にもある「グローバルイベントバス」で処理した方が
コンポーネント間のデータの受け渡しは綺麗にかけるかな、とは思ってます。

Javascript
1// app.js（エントリポイントとなる、Vueのレンダリング処理を行っているファイル）に以下を追記
2// $hubでグローバルイベント処理ができる
3Vue.prototype.$hub = new Vue()
4
5// 子: 直接全体画面コンポーネントにイベントを送る 
6methods: {
7  updateValue ( e ) {
8    this.$hub.$emit( 'add-place-panel', e.target.value )
9  }
10}
11
12// 全体の画面にmountedを追加し、イベントの受け取り処理を行う
13mounted: {
14  this.$hub.on( 'add-place-panel', this.onAddPlacePanel )
15}