vue自定義組件v-model

本文轉載自查看原文 2020-02-21 18:32 1619 vue

　　一個組件上的`v-model`默認會利用名為`value`的prop(屬性)和名為input的事件，但是像單選框、復選框等類型的輸入控件可能會將`value`特性用於不同的目的。這時候我們可以在定義組件的時候，通過設置`model`選項可以用來實現不同的處理方式。

　　在創建組件的時候，添加`model`屬性，其中要包含兩個屬性配置，分別是：

event：什么時候觸發v-model行為
prop：定義傳遞給v-model的那個變量，綁定到哪個屬性值上

下面是實現計數器作用的代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue自定義組件v-model</title>
</head>

<body>
    <div id="app">
        <Stepper v-model="goodsCount"></Stepper>
    </div>
    <script>
        Vue.component('Stepper', {
            props: ['count'],
            template: `
            <div>
                <button @click="sub">-</button>
                <span>{{count}}</span>
                <button @click="add">+</button>
            </div>
        `,
            model: {
                //event:什么時候觸發v-model行為
                event: 'change-count',
                // 定義傳遞給v-model的那個變量，綁定到哪個屬性值上
                prop: 'count'
            },
            methods: {
                sub() {
                    // 觸發上面model中定義的觸發名稱
                    // 這里不需要修改this.count的值，只要把最終的結果傳遞出去就行
                    this.$emit("change-count", this.count - 1)
                },
                add() {
                    this.$emit("change-count", this.count + 1)
                }
            }
        })
        new Vue({
            el: "#app",
            data: {
                goodsCount: 0
            }
        })
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [轉] vue 自定義組件使用v-model 【vue】---- v-model在自定義組件中的使用 Vue之自定義組件的v-model Vue——自定義組件實現v-model vue 自定義組件 v-model Vue之自定義組件的v-model vue 自定義組件 v-model Vue自定義組件通過v-model通信 vue自定義組件中v-model的使用 vue 自定義組件使用v-model