VUE学习笔记（四）

1. 组件化和模块化的区别：

    - 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

    - 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

2. 创建组件的方式

   方式一：

 
      // 1.1 使用Vue.extend创建的组件
      var exp1 = Vue.extend({
          // template属性指定了组件的HTML结构
          template: '<h3>这是extend创建的组件</h3>'
      });
      // 1.2 使用Vue.component('组件名称', 创建出来的组件对象)
      // Vue.component('myExp', exp1);
      /* 如果使用Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在 
       引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之间，
       使用-连接。如果不使用驼峰，直接拿名称使用即可。 */
      Vue.component('myexp', exp1);
      var vm = new Vue({
          el: '#app',
          data() {
              return { 
              }
          }
      })

    <div id="app">
        <!-- <my-exp></my-exp> -->
        <myexp></myexp>
    </div>

 

 

   方式二：

    // 不论使用哪种方式创建组件，组件的template属性指向的模板内容，必须有且只有一个根元素
    Vue.component('myexp', {
        template: '<div><span>这是extend创建的组件</span></div>'
    });

    <div id="app">
        <myexp></myexp>
    </div>

  方式三：

    Vue.component('myexp', {
          template: '#tmp'
      });

    <div id="app">
        <myexp></myexp>
    </div>
    <template id="tmp">
        <div>
            <h3>在被控制的 #app 外面，使用 template 元素创建的HTML结构</h3>
        </div>
    </template>

 

 3. 组件中的data

     组件中的 data 和实例中的 data 有点不一样，实例中的 data 可以为一个对象， 但是组件中的 data 必须是一个方法，并且return 一个对象。

    var vm = new Vue({
          el: '#app',
          data() {
              return { 
              }
          },
          components: {
              'myexp': {
                  template: '#tmp',
                  data() {
                      return {
                          msg: 123
                      }
                  }
              }
          }
      })

    <template id="tmp">
        <div>
            <h3>组件中的data: {{ msg }}</h3>
        </div>
    </template>

 

 4. 为什么组件中的data必须是一个function，并且return 一个内部对象？

    

    let dataObj = { count: 0 };
      var vm = new Vue({
          el: '#app',
          components: {
              'counter': {
                  template: '#tmp',
                  data() {
                      // 如果return 一个外部变量，那么在多次引用组件的时候，所有实例都共享一个data数据
                      return dataObj
                  },
                  methods: {
                      increment() {
                          this.count++;
                      }
                  }
              }
          }
      })

    <div id="app">
        <counter></counter>
        <hr>
        <counter></counter>
        <hr/>
        <counter></counter>
    </div>
    <template id="tmp">
        <div>
            <input type="button" value="+1" @click="increment">
            <h3>{{ count }}</h3>
        </div>
    </template>

上述代码中组件 counter 的 data 引用了一个对象，复用组件的所有实例都共享同一份数据。

    组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一个组件实例的data数据被改变时，其他组件实例的data数据不受影响。

 

    Vue.components('counter', {
          template: '#tmp',
          data() {
              return {
                  count: 0
              }
          },
          methods: {
            increment() {
                this.count++;
            }
          }
      })

 

 5. 组件切换

   Vue提供了 component ，来展示对应名称的组件，component 是一个占位符，:is 属性可以用来指定要展示的组件的名称

   示例：

    Vue.component('login', {
        template: '<h3>登录组件</h3>'
    })
    Vue.component('register', {
        template: '<h3>注 册组件</h3>'
    })
    var vm = new Vue({
          el: '#app',
          data() {
              return {
                componentId: 'login'
              }
          },
          methods: {
            toggle(name) {
                this.componentId = name;
            },

          }
      })

 

    <div id="app">
        <a href="" @click.prevent="toggle('login')">登录</a>
        <a href="" @click.prevent="toggle('register')">注册</a>
        <component :is="componentId"></component>
    </div>