在开发页面的时候，我们希望：

  • 一个页面的每个部分单独分享成一个小切片
  • 每个切片都有自己的视图结构、样式与逻辑

  • 每个切片形成的结构、样式、逻辑的整体称为组件

    组件的好处

    组件是独立的块
    任意地方多次使用

  • 复用性高

独立使用

  • 维护性高

高配置度，提供接口来传入一些属性

  • 配置性高，使用的多样性

    组件可以相互嵌套

    如：
    header: 父组件
    +——— logo、导航、用户登录注册、搜索: 子组件

header 要使用 logo

  • 必要条件: header 要注册 logo 组件

logo 要使用 header 传入的属性

  • 必要条件: logo 要注册传入的属性

    注册组件与属性

    ``javascript const MyUser = { template:
    1.   <div>
    2.       <a href=“#”>Sign in</a> | <a href=“#”>Sign up</a>
    3.   </div>
    ` };

const NavItem = { props: [‘navItem’],
template: <li style="float: left; padding: 0 15px;"> <a :href="navItem.link" target="_blank">{{ navItem.title }}</a> </li> };

const MyNav = { components: { NavItem }, props: [‘navData’] template: <ul style="float: left; padding: 0 35px; margin: 0; list-style:none"> <nav-item v-for="item of navData" :key="item.id" :nav-item="item"/> </ul> };

const MyLogo = { template: <div style="float: left; padding: 0 20px;">LOGO</div> };

const MyHeader = { components: { MyLogo, MyNav, MyUser }, props: [‘navData’] template: <header> <my-logo /> <my-nav :nav-data="navData" /> <my-user /> </header> };

const App = { // 组件的局部注册 components: { MyHeader }, data() { return { navData: [ {id: 1, title: ‘Baidu’, link: ‘http://www.baidu.com'}, {id: 2, title: ‘Google’, link: ‘http://www.google.com'}, {id: 3, title: ‘Bing’, link: ‘http://www.bing.com'} ], navData2: [ {id: 1, title: ‘京东’, link: ‘http://www.jd.com'}, {id: 2, title: ‘淘宝’, link: ‘http://www.taobao.com'}, {id: 3, title: ‘天猫’, link: ‘http://www.tmall.com'} ] } }, tempalte: <div> <my-header :nav-data="navData" /> <my-header :nav-data="navData2" /> </div> };

Vue.createApp(App).mount(‘#app’); ``` Vue 是使用单向数据流，由父组件通过 props 的方式把数据一层一层地传到子组件去。

组件结构

组件树 -> 单向数据流 (Single-direction data flow)

组件化设计
App -> navData
MyHeader -> navData
MyLogo
MyNav -> navData
NavItem -> navData -> item
MyUser

想办法要把组件化设计尽量的扁平化