Vue js 単一コンポーネントに別のコンポーネントの登録

Question

LaravelにてVueを使用しています

app.jsに

Vue.component('foo',require('./foo.vue');

というコードをかけばコンポーネント登録ができることは知っています。
ただ、コンポーネントが多い場合全部app.jsに登録するのは違うんじゃないかと思いました。

そこで、親子関係にあるコンポーネントの場合、そしてその子はその親からしか使われない場合、親のコンポーネントに登録する記述をかけば良いと思い以下のようなコードを書いたのですが、

[Vue warn]: Property or method "search_store" is not defined on the instance but referenced during render

　と表示されて動作しませんでした。

<template>
    <div>
        <component :is="current_component"></component>

        <button @click="current_component = search_store">店名で検索</button>
        <button @click="current_component = search_item">商品名で検索</button>
    </div>
</template>

<script>
    import search_store from './search_store';
    import search_item from './search_item';

    export default {
        name: "search_home",
        components: {
            search_store,
            search_item
        },
        data: function () {
            return {
                current_component: null
            }
        }
    }
</script>

<style scoped>

</style>

上記の方法を実現するやり方はあるのでしょうか？

Answer 1

current_component に入れる値は'などで囲って文字列型にしなければなりません。

<button @click="current_component = 'search_store'">店名で検索</button>

Comments

[hi_se_pr]

とても簡単に実装できました。
ありがとうございます！！

Answer 2

上記の方法でコンポーネントの登録はできていることがわかりました。

data:にコンポーネントを登録してなかったため、
@click=""部分の記述が適切ではなかったです。

<template>
    <div>
        <component :is="current_component"></component>

        <button @click="changeCurrentComponent(search_store)">店名で検索</button>
        <button @click="changeCurrentComponent(search_item)">商品名で検索</button>


    </div>
</template>

<script>
    import search_store from './search_store';
    import search_item from './search_item';

    export default {
        name: "search_home",
        components: {
            search_store,
            search_item
        },
        data: function () {
            return {
                current_component: null,
                search_store,
                search_item

            }
        },
        methods: {
            changeCurrentComponent(component){
                this.current_component = component
            }


        }
    }

</script>

<style scoped>

</style>

上記のように書き換えて見たら上手く動きました。

もしもっと効率よく書く方法があれば教えてください