试图重用vue.js中的组件

Question

我是vue.js中相当新的，我正在尝试做一个应用程序，您可以在其中找到书籍，但是我暂时坚持重用组件。
当我打开应用程序时，bookList组件用于显示最受欢迎的书籍。
我想要做的是：
从输入字段中搜索书籍，并用响应填充bookList组件，然后将其呈现在相同的视图中。 这是我的代码。任何建议，欢迎

<div id="app"> 
    <nav id="menu"> 
    <input type="text" v-model="newSearch" /> 
    </nav> 

    <main id="panel"> 
    <header> 
     <button class="toggle-button">☰</button> 
     <!-- <books :books="books" :url="url"></books> --> 
     <router-view></router-view> 
    </header> 
    </main> 
</div> <!-- end app --> 

<template id="book-list-template"> 
    <ul> 
    <li v-for="book in books"> 
     <div class="content"> 
     <a v-link="{ name: 'book', params: { bookId: book.ID } }"> 
      <img :src="book.thumbnail" class="center-block"> 
      <p>{{book.title}}</p> 
     </a> 
     </div> 
    </li> 
    </ul> 
</template> 
<template id="single-book-template"> 
    <div class="content" v-for="book in book"> 
    <img :src="book.cover" class="center-block prueba"> 
    <p>{{book.title}}</p> 
    </div> 
</template> 

url = 'api_url' 
//defining some components 
var bookList = Vue.extend({ 
    template: '#book-list-template', 
    data: function() { 
     return { 
      books: [], 
     } 
    }, 
    ready: function() { 
     this.getBooks(); 
    }, 
    methods: { 
     getBooks: function() { 
      this.$http.jsonp(url+'criteria=most_viewed').then(function(response) { 
       this.$set('books', response.data); 
      }, function(response) { 
       alert(response.status); 
      }); 
     } 
    } 
}); 


var singleBook = Vue.extend({ 
    template: '#single-book-template', 
    data: function() { 
     return { 
      book: '' 
     } 
    }, 
    ready: function() { 
     this.getBookById(); 
    }, 
    methods: { 
     getBookById: function() { 
      this.$http.jsonp(url+'id='+this.$route.params.bookId).then(function(response) { 
       this.$set('book', response.data); 
      }, function(response) { 
       alert(response.status); 
      }); 
     } 
    } 
}); 

//creating a vue instance 
new Vue({ 
    el: '#app', 
    data: { 
     newSearch: '' 
    } 
}) //end vue 

var App = Vue.extend({}) 

var router = new VueRouter() 

router.map({ 
    '/': { 
     component: bookList 
    }, 
    'book/:bookId': { 
     name: 'book', 
     component: singleBook 
    } 
}) 

router.start(App, '#app') 

Answer 1

您可以来寻找keep-alive指令。如果您Ctrl + F而求索“保活”在这里，你会发现它：http://vuejs.org/guide/components.html

Answer 2

你已经有了一个book list模板来处理搜索和图书列表进行过滤，然后book模板处理显示个人书。所以它可能看起来像这样：

<template id="book-list-template"> 
    <input type="text" v-model="searchText"> 
    <ul> 
    <li v-for="book in books | filterBy searchText"> 
     <single-book :book="book"></single-book> 
    </li> 
    </ul> 
</template> 

<template id="single-book-template"> 
    <div class="content"> 
    <img :src="book.cover" class="center-block prueba"> 
    <p>{{book.title}}</p> 
    </div> 
</template> 

所以列表模板只是生成一堆单书模板。该列表处理书籍的加载和过滤（使用搜索栏或其他方式），书本模板处理每本书的任何功能（即“添加到我的阅读列表”或“订单簿”按钮。书模板，你需要添加图书的prop（而不是具有作为data属性），所以它可以接受来自您的列表模板一本书。

var singleBook = Vue.extend({ 
    template: '#single-book-template', 
    props: ['book'] 
    } 
}); 

var bookList = Vue.extend({ 
template: '#book-list-template', 
data: function() { 
    return { 
     books: [], 
     searchText:"" 
    } 
}, 
ready: function() { 
    this.getBooks(); 
}, 
methods: { 
    getBooks: function() { 
     this.$http.jsonp(url+'criteria=most_viewed').then(function(response) { 
      this.$set('books', response.data); 
     }, function(response) { 
      alert(response.status); 
     }); 
    } 
}, 
components:{ 
    "single-book":singleBook 
} 
}); 

最后，输入添加到您的书本 - 列表组件允许用户搜索一本书，你可以将它建模为searchText的数据然后你可以在你的