复杂页面开发

页面的开发时为什么需要封装多个业务组件？

为了实现页面的复杂功能和交互。将一个页面拆分成多个组件，每个组件负责自己的部分，可以使代码更加模块化、易于维护和扩展。

例如，在一个电商网站中，一个产品页面可能包含产品图片、产品名称、产品描述、价格、评价等多个部分，每个部分都可以使用一个组件来实现。这样，每个组件负责自己的功能和状态，组件之间相互独立，可以单独进行开发、测试和维护，也可以在不同的页面中重复使用。此外，组件之间可以通过组件间通信（props、events）来实现交互和数据共享，使页面的功能更加丰富和灵活。

因此，使用多个组件可以提高页面的可维护性、可重用性和可扩展性，同时也可以使开发效率更高，代码更清晰。

Vue.js中父子组件之间传递参数可以通过props选项实现。父组件可以将数据作为属性传递给子组件，子组件可以通过props选项声明接收这些属性。这样，父组件和子组件之间就可以进行数据传递和交互。

组件交互之 父子组件传参

下面是一个简单的 jianghusjs 父子组件传递参数的示例：

<!-- 父page页面 -->
{% extends 'template/jhTemplateV4.html'%}
{% block vueTemplate %}
<script type="text/html" id="app-template">
  <div>
    <h1>{{ title }}</h1>
    <child-component :message="message" @update="updateMessage"></child-component>
  </div>
</script>
<div id="app"></div>
{% endblock %}
{% block vueScript %}
<script>
{% include 'component/childComponent.html' %}
new Vue({
  el: '#app',
  template: '#app-template',
  vuetify: new Vuetify(),
  data() {
    return {
      title: 'Parent Component',
      message: 'Hello, Child Component!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
});
</script>
{% endblock %}

<!-- 子组件 component/childComponent.html -->
<template id="child-component">
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
Vue.component("ChildComponent", {
    template: "#child-component",
  vuetify: new Vuetify(),
  props: {
    message: String
  },
  methods: {
    changeMessage() {
      this.$emit('update', 'New Message');
    }
  }
});
</script>

在这个例子中，父组件包含一个标题和一个子组件<child-component>，

• 属性传递给子组件: 通过:message="message"将父组件中的数据message作为属性传递给子组件。
• 子组件接收属性: 子组件中通过props选项声明接收这个属性。
• 子组件变更事件: 子组件中的<p>标签显示message属性的值，<button>标签点击后会触发changeMessage()方法，通过this.$emit('update', 'New Message')语句向父组件发送update事件，并传递一个新的消息'New Message'。父组件中的@update="updateMessage"监听到update事件，并执行updateMessage(newMessage)方法，将新消息保存到message**属性中。

通过props选项实现父子组件之间的数据传递，可以使组件之间解耦、独立、易于维护和扩展。同时，通过事件机制实现组件之间的交互，可以使组件之间更加灵活和动态。