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>

props：props的名稱就是我們在首頁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 };
},