vueのコンポーネント化された開発

vueのコンポーネント化された開発

フロントエンドを開発していた頃は、すべての業務をまとめていましたが、後のメンテナンスでも拡張でも面倒くさく、コードの再利用につながりませんでした。コンポーネントベースの開発モデルは、この種の問題を解決するためのものであり、複雑なビジネスコードをコンポーネントに分割します。ページを開発する必要がある場合は、このコンポーネントを直接紹介して直接使用できます。。

1.vueコンポーネントの最初の使用

コンポーネントを登録する3つのステップ
1.コンポーネントコンストラクターを作成します。template：
テンプレートを表します。これは、後でページに表示するhtmlテンプレートコードです。

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2.コンポーネントを登録します。
パラメーター1：このコンポーネントに付ける名前。これは、ページ上で直接ラベルとして使用できます。
パラメーター2：上記で作成したコンポーネントコンストラクターオブジェクト

/*注册组件*/
    Vue.component('my-cpn',cpn);

3.コンポーネントを使用します。コンポーネントは、vueにマウントされたタグの下に書き込む必要があることに注意してください。そうしないと、有効になりません。

<div id="app">
    <my-cpn></my-cpn>
</div>

このメソッドは、コンポーネント開発を使用する最も原始的な方法です。このメソッドは後の段階では使用されませんが、開発にはより単純なシンタックスシュガーメソッドが使用されます。

2.グローバルコンポーネントとローカルコンポーネント

Vue.component（）を呼び出してコンポーネントを登録すると、コンポーネントの登録はグローバルに
なります。つまり、コンポーネントはどのVueの例でも使用できます。

部分的なコンポーネントを作成する方法：

1.コンポーネントコンストラクターを作成します。

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2.vueインスタンスにコンポーネントを作成します

const vue = new Vue({
        el: "#app",
        data: {},
        /*使用这个对象，创建组件，创建出来的组件只能被挂载在这个实例上的标签内使用*/
        components:{
            "my-cpn": cpn
        }
    })

3.親子コンポーネント

Vueのコンポーネント化は、アプリケーションのすべてのコンテンツを個々のコンポーネントに抽出し、最終的にコンポーネントツリーを形成することであることがわかっています。次に、親子コンポーネントを使用する必要があります。

<script>
    /*创建一个子组件*/
    const chile = Vue.extend({
     
     
        template:`
            <div>
                <h1>我是子组件的标题</h1>
                <a href="http://www.baidu.com">点我</a>
            </div>
        `
    })
    /*创建一个父组件*/
    const fu = Vue.extend({
     
     
        template:`
            <div>
                <h1>我是父组件的标题</h1>
                <chile></chile>
            </div>  
        `,
        <!--父组件创建局部的子组件，就可以在父组件的标签内使用了-->
        components:{
     
     
            "chile":chile
        }
    })


    const vue = new Vue({
     
     
        el: "#app",
        data: {
     
     },
        <!--跟组件引入父组件，在引入父组件的时候，父组件就已经编译好了-->
        components: {
     
     
            "my-cpn":fu
        }
    })
</script>

注：親子コンポーネントを使用する場合は、各テンプレートにルートタグが必要です。そうでない場合、エラーが報告されます。親コンポーネントを導入したとき、親コンポーネントはすでに解析されており、チリのラベルは存在しませんでした。親コンポーネントが最終的に使用されたとき、親コンポーネントはすでに子コンポーネントのコンテンツを独自に導入していました。

4.コンポーネントのシンタックスシュガーを作成します

上記のコンポーネントの作成は非常に面倒です。vueはコンポーネントを作成するためのシンタックスシュガーを提供します

グローバルコンポーネントの構文シュガー：
コンポーネントコンストラクターの登録を拡張する手順を省略します。
構文：
Vue.component（タグ名、{ テンプレート：}）
html模板代码

ローカルコンポーネントの
シンタックスシュガー構文：

const vue = new Vue({
       el: "#app",
       data: {},
        /*局部组件的语法糖*/
        components:{
            "标签名":{
                template:`
                    html模板代码
            }
        }
    })

テンプレートをオブジェクトに抽出することもできます。より簡潔になります。

<!--<template id="mytem">
    <a>haha</a>
</template>-->
<script type="text/x-template" id="mytem">
    <a>点我</a>
</script>

上記の2つの方法では、テンプレートコードを抽出できます。テンプレートコードを使用する必要がある場合は、IDに従って照合できます。

全局
Vue.component("my-cpn",{
        template:"#mytem"
    })
局部
components:{
    "my-cpn":{
         template:"#mytem"
     }
}

5.コンポーネントデータストレージ

コンポーネントはvueインスタンスのデータにアクセスできません。コンポーネントには実際にデータを保存する場所があります。

模板中使用的数据：
<template id="mytem">
    <h1>{
   
   {message}}</h1>
</template>
可以在模板对象中，定义data：
components:{
    "mycpn":{
         template:"#mytem",
         /*data: function (){
             return {
                 message: "lala"
             }
         }*/
         data(){
             return{
                 message:'papa'
             }
         }
     }
 }

注：ここでのデータは関数である必要があり、戻り値はオブジェクトであり、データはオブジェクトに格納されます

6.親子データ

これはコンポーネントベースの開発であり、個々のコンポーネントをvueインスタンスから直接取得することはできないため、子コンポーネントがvueインスタンスから値を取得する場合は、親から子を使用する必要があります。

使用される主なものはこのpropsプロパティです
。propsプロパティは配列にすることができます。配列内の文字列はxxxの値であり、引用符で囲む必要があります
。Prosはオブジェクトにすることもできます。オブジェクトはより多くの関数を持つことができ、タイプを確認します。待つ必要があります

息子から父親へのパス

親が子を渡す状況に加えて、ユーザーが行ったことを親コンポーネントに通知する子コンポーネントが発生する場合があります。このとき、子を使用して親を渡す必要があります。イベントによる通知

スロットの使用法

コンポーネントベースの開発を使用する場合、異なるページの特定のコンポーネントが同じである可能性があります。これは、あまり書きたくないコンポーネントです。現時点では、コンポーネントテンプレートにスロットを書き込むことができます。 。

1.使用する場合、交換するスロットの内容を書き込まない場合は、デフォルトのスロットコンテンツが使用されます
。2 。スロットに名前を付けることもできます。そのスロットを交換する場合は、交換用スロットスロットを指定でき、その他の部品は変更されません。