vue在自定義組件上使用v-model和.sync的方法實例

更新時間：2022年07月29日 12:37:31 作者：lupulus

自定義組件的v-model和.sync修飾符其實本質(zhì)上都是vue的語法糖,用于實現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關于vue在自定義組件上使用v-model和.sync的相關資料,需要的朋友可以參考下

自定義事件

tips

推薦始終使用 kebab-case 的事件名。（v-on會將事件名自動轉(zhuǎn)換為小寫，避免匹配不到）
- changeData ×
- change-data √

自定義組件的v-model

用法：
- 父組件定義數(shù)據(jù)源（不需要定義修改數(shù)據(jù)的方法），在子組件標簽上通過v-model="data"進行傳遞
- 默認傳遞的屬性名是value,事件名為input?？梢栽谧咏M件中配置model選項重命名屬性名和事件名
- 子組件props接受名稱為value的屬性（固定名）,通過$emit("input", payload)在子組件即可修改數(shù)據(jù)，形成雙向綁定

    // 父組件
    <template>
    <div>
        <p>我是dad</p>
        <span>{{ dadData }}</span>
        <Son v-model="dadData" />
    </div>
    </template>

    <script>
        import Son from "./SonItem.vue";

        export default {
            components: {
                Son,
            },
            data() {
                return {
                dadData: "我是爹地",
                };
            },
        };
    </script>

    // 子組件
    <template>
        <div>
            <p>我是兒子組件</p>
            <input type="text" :value="value" @input="sonInput" />
            <button @click="btnClick(Date.now())">點擊</button>
        </div>
    </template>

    <script>
        export default {
            // 如果重命名，記得這里也要修改哦 props: ["novalue]
            props: ["value"],
            // 這里可以重命名接收到的屬性值和事件名
            // model: {
            //   prop: "novalue",
            //   event: "changeNoval",
            // },
            methods: {
                sonInput(e) {
                    this.$emit(`input`, e.target.value);
                },
                btnClick(data) {
                    this.$emit(`input`, data);
                },
            },
        };
    </script>

.sync 修飾符

為什么會有這個修飾符？它解決了什么問題？
- 正常我們父子組件通信是父組件props傳參，v-on監(jiān)聽改變數(shù)據(jù)的事件，子組件通過$emit去觸發(fā)。
- 父組件每次都要定義類似的事件函數(shù)this.data = newData，如果是一個對象，那么它的每個屬性傳遞過去都要定義相應的事件函數(shù)（麻煩重復的代碼變多了）
- .sync就是用來簡化這塊的代碼
怎么使用.sync？
- 父組件直接在子組件標簽上使用 :name.sync="person.name"
- 默認發(fā)送的處理的事件名為 update:name,name就是你傳過去的屬性名
- 如果需要使用屬性，子組件可以通過props接收，也可以使用$attr，$parent等獲取。注意：props接收過的屬性不會出現(xiàn)在當前實例的$attr中
- 如果需要觸發(fā)事件，可以使用$emit("update:屬性名", payload)，也可以使用$listener
- 使用v-bind.sync="obj"可以把obj對象中的每個屬性和事件自動分發(fā)給子組件

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son :something.sync="dadData" v-bind.sync="dadObj" />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "我是爹地",
      dadObj: {
        girlFriends: ["dingding", "momo", "weiwei"],
        age: 24,
      },
    };
  },
};
</script>


// 子組件
<template>
  <div>
    <p>我是兒子組件</p>
    <button @click="btnClick(Date.now())">點擊</button>
    <span>{{ something }}</span>
    <span>{{ girlFriends }}</span>
  </div>
</template>

<script>
export default {
  props: ["something", "girlFriends"],
  methods: {
    btnClick(data) {
      this.$emit(`update:something`, data);
    },
  },
  mounted() {
    this.$listeners["update:girlFriends"](["singleDog"]);
    // {age: 24}
    console.log(this.$attrs);
  },
};
</script>