javascript - 如何将父级上的 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>

请参阅此处的文档。