カスタムサブコンポーネントの v-model

1. 伝統的な父子継承

フロントエンドプログラマが開発する際によく使うのが「親子パラメータ転送」で、皆さんもご存知かと思いますが、ここで簡単に説明します。

1. 父から息子へ

(1) 親コンポーネントに子コンポーネントを導入し、親コンポーネントのコンポーネントに登録する

import Son from './son'
export default {
    name: 'Father',
    components: {
        Son
    }
}

(2) 親コンポーネント内のサブコンポーネントを通常のラベルと同様に使用し、サブコンポーネントのプロパティを使用して転送するデータを渡します。

<template>
    <div>
        <Son type="666" />
    </div>
</template>

(3) 親コンポーネントから渡された値を子コンポーネントのpropsで受け取り、型を指定する

export default {
    name: 'Son',
    props: {
        type: String
    }
}

(4) このとき、親コンポーネントから渡された値は、子コンポーネント自身のデータ内のデータと同様に、子コンポーネントでも利用することができます。

<template>
    <div>
        来自父组件的 {
   
   { type }}
    </div>
</template>

2.子传父

(1) 親コンポーネントにサブコンポーネントのラベルを記述してイベントタイプをカスタマイズし、対応するイベント処理関数をバインドします (この関数のパラメータはサブコンポーネントによって渡されるデータです)。

<template>
    <div>
        <Son @toFather="fromSon" />
    </div>
</template>


<script>
import Son from './son'
export default {
    name: 'Father',
    components: {
        Son
    },
    methods: {
        fromSon(data) {
            console.log('子组件传递的参数'，data )
        }
    }
}
</script>

(2) 子コンポーネントで、$emit を使用して、親コンポーネントのカスタムイベントタイプに対応するイベントを呼び出します。$emit の最初のパラメータは、対応する親コンポーネントのイベントタイプ、2 番目のパラメータは、親コンポーネントのカスタムイベントタイプに対応するイベントを呼び出します。渡される。

<template>
    <div>
        <button @click="dataToFather" />
    </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            sonData: '子组件的数据'
        }
    },
    methods: {
        dataToFather() {
            this.$emit('toFather', this.sonData)
        }
    }
}
</script>

では、同じ値を親から子に転送するもっと簡単な方法はあるのでしょうか? この質問をすると、多くの人が「懐かしい！」と感じると思います。v-modelと似た感じでしょうか？実際、カスタムコンポーネントは v-model をカスタマイズすることもできます。

2. サブコンポーネントの v-model をカスタマイズする

1. まず、子コンポーネントを通常どおり親コンポーネントに導入し、ラベルとして使用する必要があります。

<template>
    <div>
        <Son  />
    </div>
</template>

<script>
import Son from './son'
export default {
    name: 'Father',
    components: {
        Son
    }
}
</script>

2. サブコンポーネントに移動して、サブコンポーネントの v-model の使用規則を定式化する必要があります。データと同じレベルでモデルを作成し、それに対応する属性値は 2 つの属性を含むオブジェクトです。

prop: この属性は、v-model の使用後にサブコンポーネントで変更される値をバインドするために使用されます。
イベント: この属性は、親コンポーネントのサブコンポーネントラベル上の元のカスタムイベントタイプを置き換えるために使用されます。このイベントタイプは、後で $emit を使用して呼び出されます。

また、値を受け取り、通常は props で型を指定する必要があることにも注意してください。そうしないと、グループを取得してサブコンポーネントで使用することができません。

<script>
export default {
    name: 'Son',
    model: {
        prop: 'value', // 父组件的v-model所绑定的值是这里的prop的属性值对应的props中的值
        event: 'change' // 定义通过$emit去调用的父组件的事件，在父组件的v-model改变时则会按照这个方法去处理
    },
    props: {
        value: String, // 接受父组件传递的v-model后面值的类型,必须在此注册不然没法使用
    },
}
</script>

3. この時点で、親コンポーネントの子コンポーネントのラベルで v-model を使用できます。

<template>
    <div>
        父组件{
   
   { sonData }}
        <Son v-model="sonData" type="66" />
        <el-input v-model="sonData" clearable maxlength="200" />
    </div>
</template>

<script>
import Son from './son'
export default {
    name: 'Father',
    components: {
        Son
    },
    data() {
        return {
            sonData: '2'
        }
    }
}
</script>

4. v-model でバインドされたデータを、子コンポーネントの $emit を通じて親コンポーネントに渡します。

<template>
    <div>
        <el-input v-model="toFather" clearable maxlength="200" @change="change" />
    </div>
</template>

<script>
export default {
    name: 'Son',
    model: {
        prop: 'val1ue', // 父组件的v-model所绑定的值是这里的prop的属性值对应的props中的值
        event: 'change' // 定义通过$emit去调用的父组件的事件，在父组件的v-model改变时则会安装这个方法去处理
    },
    props: {
        value: String, // 接受父组件传递的v-model后面值的类型,必须在此注册不然没法使用
    },
    data() {
        return {
            toFather: '子组件的数据'
        }
    },
    methods: {
        change() {
            this.$emit('change', this.toFather)
        }
    }
}
</script>

この時点で、カスタム v-model が完成しました。親コンポーネントの <Son v-model="sonData" /> の SonData を変更すると、それに応じて子コンポーネントの値も変更されることがわかります。 <el-input v-model="toFather" clearable maxlength="200" @change="change" /> を変更することによって子コンポーネントで変更メソッドが呼び出されるとき、メソッドはトップルールも渡します。親コンポーネントの v-model にバインドされた SonData へのパラメータです。

公式ドキュメントも参照できます:カスタムイベント - Vue.js (vuejs.org)