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>

请参阅文档here。

如何将父项上的v模型传递给模板

1 个答案: