vue3使用v-model綁定

vue3 v-model的寫法改了很多,就用下面這個首頁+一個搜尋input來示範,我會把input包成一個component,然後key資料的時候邊更新到首頁。

 

我們預計首頁呼叫component時,要這樣使用v-model

<Search v-model:inputText="searchText" />

 

組件Search.vue

css的部分就先忽略。

<template>
  <div class="search">
    <input v-model="text" type="text" />
  </div>
</template>
<script>
import { computed } from "vue";

export default {
  name: "Search",
  props: {
    inputText: {
      type: String,
      default: "",
    },
  },
  emits: ["update:inputText"],
  setup(props, { emit }) {
    const text = computed({
      get: () => props.inputText,
      set: val => emit("update:inputText", val),
    });
    return {
      text,
    };
  },
};
</script>

propsprops的名稱就是我們在首頁v-model:inputText,那個冒號後面的名稱。

emits:只要你有使用他的emit功能,就要把emit的名字填進去。

setup:這是vue3改最多的地方,在這邊要先呼叫computed,因為我們在組件內也想用v-model(XD),預設值的get就抓props傳進來的,set當然就是用emit拉~ 最後setup就是規定要return一個「物件」,記住是回傳物件啊~我當初就是整個回傳我的參數,然後找半天找不到錯在哪(汗

 

 

在首頁呼叫

這邊就是開頭說的,使用v-model綁定,inputText是我給他的props名稱,searchText是我放資料的地方,類似以前vue2的data那邊放的東西。

<Search v-model:inputText="searchText" />

vue3放資料的地方改成放在setup()裡面,宣告變數可以使用ref或者是reactive,這邊我使用ref,一樣回傳是回傳物件喔!

setup() {
  const searchText = ref("");
  return { searchText };
},

 

完整程式碼:

<template>
  <section class="home">
    <h1>search a song or a singer</h1>
    <Search v-model:inputText="searchText" />
    {{ searchText }}
  </section>
</template>
<script>
import Search from "/@/components/Input/Search.vue";
import { ref } from "vue";
export default {
  name: "Home",
  components: { Search },
  setup() {
    const searchText = ref("");
    return { searchText };
  },
};
</script>

 

 

剩下按鈕的部分,因為跟vue2差不多~提供關鍵點:

<button @click="handleSearch">search</button>
emits: ["search"],
setup(props, { emit }) {
  //...
  const handleSearch = () => {
    emit("search");
  };

  return {
    //...
    handleSearch,
  };
},

 

<Search v-model:inputText="searchText" @search="handleSearch" />
setup() {
  const searchText = ref("");
  const handleSearch = () => {
    console.log(searchText.value);
  };
  return { searchText, handleSearch };
},

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。