使用vue利用组件编程、父组件向子组件传递信息写一个图书网站页面详细代码

为了回答这个问题，需要更多的信息，例如这个图书网站页面的具体需求和设计。但是，我可以提供一些基本的代码示例来展示如何使用Vue进行组件编程和父子组件之间的信息传递。

首先，我们需要创建一个父组件，用于渲染整个页面。在这个父组件中，我们可以定义一些数据和方法，用于传递给子组件。例如：

<template>
  <div>
    <h1>图书列表</h1>
    <BookList :books="books" @likeBook="likeBook" />
  </div>
</template>

<script>
import BookList from './components/BookList.vue'

export default {
  name: 'App',
  components: {
    BookList
  },
  data() {
    return {
      books: [
        { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas' },
        { title: 'CSS新世界', author: 'Eric A. Meyer' },
        { title: '图解 HTTP 彩色版', author: '上野宣' }
      ]
    }
  },
  methods: {
    likeBook(book) {
      alert('我最喜欢的书籍是《' + book.title + '》')
    }
  }
}
</script>

在这个父组件中，我们定义了一个名为`books`的数组，用于存储所有的图书信息。我们还定义了一个名为`likeBook`的方法，用于处理子组件传递过来的喜欢图书事件。

接下来，我们需要创建一个子组件，用于渲染图书列表。在这个子组件中，我们可以使用`props`来接收父组件传递过来的数据，并使用`$emit`来触发喜欢图书事件。例如：

<template>
  <div>
    <ul>
      <li v-for="(book, index) in books" :key="index" @click="like(book)">
        {{ book.title }} - {{ book.author }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    books: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    like(book) {
      this.$emit('likeBook', book)
    }
  }
}
</script>

在这个子组件中，我们定义了一个名为`books`的`props`，用于接收父组件传递过来的图书信息。我们还定义了一个名为`like`的方法，用于处理点击图书事件，并使用`$emit`来触发喜欢图书事件，并将当前点击的图书信息作为参数传递给父组件。

最后，我们需要在`main.js`中注册父组件，并将其挂载到页面上。例如：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

这样，我们就完成了一个简单的图书网站页面，其中包含了父子组件之间的信息传递。当用户点击某个图书时，子组件会触发喜欢图书事件，并将当前点击的图书信息传递给父组件，父组件则会弹出一个提示框，显示用户最喜欢的图书信息。