Vue(nuxt) CompositionApi　別コンポーネントのクリックイベントでv-modelの値を取得したい

vue
1// 親コンポーネント　ここで他の子コンポーネントを呼び出す
2<template lang="pug">
3  .main
4     SearchClick(@clickclick="clickclick")
5     SearchForm(@items="inputItems")
6</template>
7
8<script lang="ts">
9import { defineComponent, onBeforeMount } from '@nuxtjs/composition-api';
10import SearchClick from '~/tests/components/SearchClick.vue';
11import SearchForm from '~/tests/components/SearchForm.vue';
12
13
14export default defineComponent({
15  components: {
16    SearchClick,
17    SearchForm,
18  },
19  props: {},
20  setup() {
21
22    /** クリックイベント */
23    const clickclick = () => {
24      console.log("クリックされました");
25    };
26
27    /** formで入力した値を取得したいイベント */
28    const inputItems = (emitInputItems?: any) => {
29      console.log(emitInputItems);
30　　　// emitInputItemsに値が入らない
31    };
32
33 
34    return {
35     clickclick,
36     inputItems
37    };
38  },
39});
40</script>

vue
1// SearchFormコンポーネント　formの値入力のみ行う
2
3<template lang="pug">
4.main
5   b-form-input(
6     type="text"
7     v-model="test1"
8    )
9   b-form-input(
10     type="text"
11     v-model="test2"
12    )
13   b-form-input(
14     type="text"
15     v-model="test3"
16    )
17</template>
18
19<script lang="ts">
20import { defineComponent } from '@nuxtjs/composition-api';
21
22export default defineComponent({
23  components: {},
24  props: {},
25  setup(_, {emit}) {
26    const test1 = ref('');
27    const test2 = ref('');
28    const test3 = ref('');
29
30    const emitInputItems = () => {
31        const items: any = {
32        test1: test1.value,
33        test2: test2.value,
34        test3: test3.value,
35      };
36      emit('items', { items });
37    };
38
39
40    return {
41     test1,
42     test2,
43     test3,
44     emitInputItems
45    };
46  },
47});
48</script>

vue
1// SearchClickコンポーネント　クリックイベントのみ行う
2
3<template lang="pug">
4.main
5  b-button(variant="primary" @click="onClick") 保存
6</template>
7
8<script lang="ts">
9import { defineComponent } from '@nuxtjs/composition-api';
10
11export default defineComponent({
12  components: {},
13  props: {},
14  setup(_, {emit}) {
15    const onClick = () => {
16      emit('clickclick');
17    };
18
19    return {
20      onClick
21    };
22  },
23});
24</script>

別々のコンポーネントにした場合にv-modelに値が入るやり方がわかりません。
SearchClick.vueのクリックイベント発火時にSearchForm.vueのemitInputItems関数が実行されれば良いのだと思うのですが、うまく実装できないです・
ご教授お願いしたいです。
上記でわからない部分があれば補足いたしますので、何卒よろしくお願いいたします。

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

回答1件

自己解決

vue
1// 親コンポーネント　ここで他の子コンポーネントを呼び出す
2<template lang="pug">
3  .main
4     SearchClick(@clickclick="clickclick")
5     SearchForm(ref="children")
6</template>
7
8<script lang="ts">
9import { defineComponent, onBeforeMount } from '@nuxtjs/composition-api';
10import SearchClick from '~/tests/components/SearchClick.vue';
11import SearchForm from '~/tests/components/SearchForm.vue';
12
13
14export default defineComponent({
15  components: {
16    SearchClick,
17    SearchForm,
18  },
19  props: {},
20  setup() {
21
22    const children = ref();
23
24    /** クリックイベント */
25    const clickclick = () => {
26      console.log("クリックされました");
27      inputItems()
28    };
29
30    /** formで入力した値を取得したいイベント */
31    const inputItems = () => {
32      console.log(children.value.test1);
33      console.log(children.value.test2);
34      console.log(children.value.test3);
35      
36    };
37
38
39    return {
40     clickclick,
41     inputItems
42    };
43  },
44});
45</script>