vueでname optionを指定してくださいエラー

Question

cdnのvueで制作をしている時にエラーが起きました。
nameにcomponentと同じ名前を指定すればいいとの情報をネットから拾ったのですがエラーが解消できません。

[Vue warn]: Unknown custom element: <create-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

        <div id="generetor">
            <svg width="100px" height="150px">
                <line v-bind:x1="rotate_x1" v-bind:y1="rotate_y1" v-bind:x2="rotate_x2" v-bind:y2="rotate_y2" stroke="black" stroke-width="1" />
            </svg>      

            <form action="">
                <create-button></create-button>
            </form>

        </div>

        <script type="text/x-template" id="svg-component">
            <div class="svg_component_line">
                <p><label><input type="range" v-model="rotate_x1"></label></p>
                <p><label><input type="range" v-model="rotate_x2"></label></p>
                <p><label><input type="range" v-model="rotate_y1"></label></p>
                <p><label><input type="range" v-model="rotate_y2"></label></p>
            </div>
        </script>

        <script>

            //rangeのデータ
            var rangeDate = {
                rotate_x1: 0,
                rotate_x2: 0,
                rotate_y1: 0,
                rotate_y2: 0
            };

            //コンポーネント
            var lineComponent = {
                template: '#svg-component'
            };
            
            new Vue({
                el: '#generetor',
                data: rangeDate,
                name: 'create-button',
                component:{
                    'create-button': lineComponent,
                }
            })
        </script>

試したこと

nameにcomponent名を指定

Answer 1

解答ありがとうございました。
エラーは直りませんでしたが、アドバイス通りゆっくり学習していこうと思います。

Answer 2

解答ありがとうございました。
エラーは直りませんでしたが、アドバイス通りゆっくり学習していこうと思います。

Answer 3

new Vue({
  el: '#generetor',
  data: rangeDate,
  name: 'create-button',
  component:{
    'create-button': lineComponent,
  }
})

component -> components の誤りが原因ではないでしょうか。

★★以降追記

component内で利用するデータは、component のデータとして定義するか、プロパティとしてコンポーネントに渡してやる必要があります。

Vue インスタンスに設定した data そのものは利用できません。

コンポーネント内でのみ利用するデータなら、Vue インスタンスに渡すオブジェクトに追加する代わりに、

var lineComponent = {
  template: '#svg-component',
  data: ()=>{
    rotate_x1: 0,
    ...
  }
};

というふうに、直接コンポーネント定義の部分にデータを設定してください。

Vue インスタンスから渡したい場合はプロパティ構文で書きます。

Comments

[g___]

componentsに変更してもダメでした、、、
エラーが増えます

[R.Mizukami]

コンポーネントの書き方にもいくつか誤りがあるようですね。
コードを一気に書きすぎです。よくわかっていないうちは、
最小限の動作するコードから、少しづつ機能を追加していくといいと思います。