06-Vue组件

Vue 组件化 (14-Vue组件.html)

什么是组件

组件的出现,就是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,
将来我们需要什么样的功能,就可以去调用对应的组件即可。

组件化和模块化的不同:

  • 模块化:是从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模块的职能单一。
  • 组件化:是从 UI 界面的角度进行划分的,前端的组件化,方便 UI 组建的复用。

全局组件定义的三种方式

Vue.component('组件名称',组件的模板对象)

  1. 使用 Vue.extend 配合 Vue.component 方法:
  var login = Vue.extend({
    template: '<h1>登录</h1>'
  });
  Vue.component('login', login)
  1. 直接使用 Vue.component 方法:
  Vue.component('register', {
    template: '<h1>注册</h1>'
  });
  1. 将模板字符串,定义到 script 标签中:
  <div id="app">
    <mycom3></mycom3>

    <template id="tmpl">
      <div>组件</div>
    </template>
  </div>

同时,需要使用 Vue.component 来定义组件:

  Vue.component('mycom3', {
    template: '#tmpl'
  });

  const vm = new Vue({
    el: "#app"
  });

注意:组件只能的 DOM 结构,有且只有唯一的根元素(Root Element)来进行包裹。

定义实例内部私有的组件

  <div id='app2'>
    <login></login>
  </div>
  <template id='tmpl2'>
    <h1>定义一个 template 私有组件 login</h1>
  </template>
  const vm2 = new Vue({
    el: "#app2",
    components: { // 定义实例内部私有组件
      login: {
        template: '#tmpl2'
      }
    }
  });

组件中的 data 和 methods(15-组件-组件中的data和methods.html)

  // 看 html 文件

不同组件之间的切换 v-if v-else-if v-else :is(16-组件切换.html)

组件切换-切换动画 (17-组件切换-切换动画.html)

posted @ 2021-07-30 10:31  真的想不出来  阅读(11)  评论(0编辑  收藏  举报