子コンポーネントのデータを親コンポーネントのデータに渡したい

厳密に書くと親が持っているプロパティを子でpropsとして受け取り、そのpropsの値を子側で処理した後、再度その親のプロパティに返してあげたいです。
$emitを使用すると子から親に値を渡せるとのことですが、親のプロパティを変化させる方法がいまいち分からないです。

以下の様にcategoriesという値(配列)を子に渡すとします。
このcategoriesに子のメソッド内でthis.categories.push(id: 3, name: "hoge" })
という形で配列の長さを変更し、それを親のcategoriesに戻すといった処理を行いたいのですが、
emitを含めどの様に親と子コンポーネントで記載すれば良いか分かりません。

//parent
<template>
  <v-app id="edit">
    <Search :categories="categories"></Search>
  </v-app>
</template>
<script>
export default{
    data: function() {        
        return{
            categories: [],　// <=この値を子から変化させたい
        }
    },
    components: {　
        Search
    },
　　 mounted: function() {
        axios
            .get('http://localhost:3000//users/'+ id +'/edit.json')
            .then((response) => {
　　　         response.data.categories.forEach((value) => {
         　   this.categories.push({ id: value.id, name:value.name })
       　　}
　　　　　);
　　　}
}
</script>

//chiled(dom部分省略)
 props: {
    categories: [],
 　},
 methods: {
　　select(){
　　　/*ここで配列の長さを変更したものを親のdata:categoriesに返す(反映)させたい
　　　this.categories.push(id: 3, name: "hoge" })
　　　*/
　　}
  }

どの様な処理を加えれば上記を実現できるでしょうか？
ご回答いただけると幸いです。

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

回答1件

ベストアンサー

下記のような形で親側で変更できるmethodを追加してあげると良いかなと思います。

vue
1//parent
2<template>
3  <v-app id="edit">
4    //changeHogeを結びつける
5    <Search :categories="categories" @change-hoge="changeHoge"></Search>
6  </v-app>
7</template>
8<script>
9export default{
10    data: function() {        
11        return{
12            categories: [],　// <=この値を子から変化させたい
13        }
14    },
15    components: {　
16        Search
17    },
18    methods: {
19        changeHoge (何か変更するデータ) {
20          //ここにcategoriesの変更を記載
21        }
22    },
23　　 mounted: function() {
24        axios
25            .get('http://localhost:3000//users/'+ id +'/edit.json')
26            .then((response) => {
27　　　         response.data.categories.forEach((value) => {
28         　   this.categories.push({ id: value.id, name:value.name })
29       　　}
30　　　　　);
31　　　}
32}
33</script>

vue
1//chiled(dom部分省略)
2 props: {
3    categories: [],
4 　},
5 methods: {
6　　select(){
7　　　/*ここで配列の長さを変更したものを親のdata:categoriesに返す(反映)させたい
8　　　this.categories.push(id: 3, name: "hoge" })
9　　　*/
10     this.$emit("change-hoge", 何か変更するデータ)
11　　}
12  }