如何將父級上的 v-model 傳遞到模板中

Question

我正在嘗試為搜索頁面編寫 UI，但想使用組件來重用代碼。 但是，我需要一種將頁面模型傳遞給搜索組件的方法，但看不到如何：

在 index.html 中：

<template id="search">
  <q-search inverted placeholder="Look" float-label="Search" v-model="search" /> <-- BIND HERE
</template>

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <search v-model="search"></search> <-- HOW PASS INTO THIS
  </q-layout-header>
</q-layout>
</template>

和代碼：

const search = {
  template: '#search',
  props: ['search']
};

const ListCustomersPage = {
  key: 'ListCustomersPage',
  template: '#ListCustomersPage',
  components: { search },
  data() {
    return {
      title: 'Select Customer',
      search:''  <-- FROM THIS TO 'BIND HERE'
    }
  }
};

Answer 1

我不確定我是否 100% 遵循您的要求，但您似乎只想將屬性傳遞給子組件？

<search :search="search"></search> <-- HOW PASS THIS

將道具傳遞給孩子是使用 v-bind 或冒號簡寫完成的。

<child-component :property="parent_data"></child-component>

<child-component v-bind:property="parent_data"></child-component>

請參閱此處的文檔。