vue.js学习笔记--组件化开发

一、什么是组件

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

组件化和模块化的不同：

• 模块化：是从代码逻辑的角度进行划分的
• 组件化：是从UI界面的角度进行划分的

二、全局组件定义的三种方式

1. 使用Vue.extend配合Vue.component方法

  <div id="app">
    <!-- 3.使用组件，组件必须挂载在某个vue实例下，否则它不会生效 -->
    <mycom></mycom>
  </div>

  <script>
    // 1.创建组件构造器
    const com = Vue.extend({
      template: '<h3>这是使用Vue.extend创建的组件</h3>'
    })
    // 2.注册组件
    Vue.component('mycom', com)
    
    // 也可以合并来写
    // Vue.component('mycom', Vue.extend({
    //   template: '<h3>这是使用Vue.extend创建的组件</h3>'
    // }))
    
    var vm = new Vue({
      el: '#app'
    })
  </script>

Vue.extend():

• 调用该方法创建的是一个组件构造器
• 通常在创建组件构造器时，传入template代表我们自定义组件的模板，该模板就是在使用到组件的地方要显示的HTML代码
• 事实上，这种写法在vue2.x的文档中几乎已经看不到了

Vue.component()：

• 调用该方法将刚才的组件构造器注册为一个组件，并给它起一个组件的标签名称
• 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
• 注意：如果定义全局组件时，组件标签名使用了驼峰命名，则在引用组件时，需要把大写的驼峰改为小写的字母，同时，两个单词之间使用 - 连接

2. 直接使用Vue.component方法

    Vue.component('mycom',{
      template: '<h3>这是直接使用Vue.component创建的组件</h3>'
    })

这是一种比较方便的写法，实际内部还是会调用extend方法

3. 组件模板的分离写法

  <template id="com">
    <div>
      <h2>这是使用template标签定义的组件</h2>
    </div>
  </template>

  <script>
    var vm = new Vue({
      el: '#app',
      components:{
        'mycom':{
          template:'#com'
        }
      }
    })
  </script>

三、局部组件

全局组件可以在任意vue实例下使用，如果我们注册的组件是挂载在某个实例中，那么它就是一个局部组件

   var vm = new Vue({
      el: '#app',
      components:{
        'mycom':com
      }
    })

四、父子组件通信

子组件是不能引用父组件或者vue实例的数据的，但是在开发中一些数据确实需要从上层传递到下层。比如在一个页面中，我们从服务器请求到了大量数据，其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）

1. 父组件–>子组件

  <div id="app">
    <!-- 3.父组件可以在引用子组件的时候通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以数据绑定的形式，传递到子组件内部，供子组件使用 -->
    <mycom :cmovies="movies"></mycom>
  </div>

  <template id="com">
    <div>
      <ul>
        <!-- 4.上面已经把子组件的数据绑定到cmovies中，这里可以使用 -->
        <li v-for="movie in cmovies">{{movie}}</li>
      </ul>
    </div>
  </template>

  <script>
    var vm = new Vue({
      el: '#app',
      // 1.父组件中的数据(这里把根组件看成父组件)
      data: {
        movies: ['aaa', 'bbb', 'ccc'],
      },
      components: {
        'mycom': {
          template: '#com',
          // 2.使用pros声明从父组件接收到的数据
          props: ['cmovies']
        },
      }
    })
  </script>

props的值有两种方式：

• 字符串数组，数组中的字符串就是传递的名称
• 对象，对象可以设置传递时的类型（type），也可以设置默认值（default）以及必传值（required），类型是对象或者数组时，默认值必须是一个函数

     props: {
       cmovies:{
         type:Array,
         default(){
           return []
         },
         required:true
       }
     }

2. 子组件–>父组件

  <div id="app">
    <!-- 3.父组件监听子组件的自定义事件 -->
    <mycom @itemclick="clickOp"></mycom>
  </div>

  <template id="com">
    <div>
      <button v-for="option in options" @click="btnClick(option)">{{option.name}}</button>
    </div>
  </template>

  <script>
    const mycom = {
      template: '#com',
      // 1.子组件中的数据
      data() {
        return {
          options: [{
            id: 1,
            name: 'aaa'
          }, {
            id: 2,
            name: 'bbb'
          }, {
            id: 3,
            name: 'ccc'
          }]
        }
      },
      methods: {
        btnClick(option) {
          // 2.将自定义事件发射出去，第一个参数是自定义事件的名称，可以传递参数
          this.$emit('itemclick', option)
        }
      }
    }
    var vm = new Vue({
      el: '#app',
      components: {
        mycom
      },
      // 4.父组件处理自定义事件，对传递过来的数据进行处理
      methods: {
        clickOp(option) {
          console.log(option)
        }
      }
    })
  </script>

五、 父子组件访问

1.父访问子：

• 通过this.$children访问，这种方式获取到的是父组件下所有的子组件实例，一般在需要获取所有子组件实例的时候才使用这种方法，可以使用数组下标操作指定实例
• 通过this.$ref访问指定子组件实例，需要在使用子组件时声明ref属性
  例如子组件使用时为<cpn ref='aaa'></cpn>，父组件访问该组件时使用this.$ref.aaa获取该实例

2.子访问父：

通过this.$parent访问指定父组件实例

六、 插槽-slot

组件的插槽是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底显示什么

1.基本使用：

  <div id="app">
    <mycom></mycom> 
    <mycom><button>我是拓展的内容111</button></mycom> 
    <mycom><b>我是拓展的内容222</b></mycom> 
  </div>

  <template id="com">
    <div>
      <h2>我是一个组件</h2>
      <slot></slot>
      <!-- 可以定义默认内容，如果使用组件的事件添加了内容，默认内容则不会显示 -->
      <!-- <slot><button>我是默认内容</button></slot> -->
    </div>
  </template>

2.具名插槽：

当子组件的功能复杂时，子组件的插槽可能并非一个。当存在多个插槽，想要替换指定的某个插槽中的内容，使用具名插槽比较方便。

  <div id="app">
    <mycom>
      <!-- 替换指定插槽中的内容 -->
      <button slot="left">返回</button>
    </mycom> 
  </div>

  <template id="com">
    <div>
      <!-- 插槽中存在默认内容 -->
      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
    </div>
  </template>

3.作用域插槽：

概括地说，作用域插槽是使用父组件替换插槽的标签，但是内容由子组件提供

  <div id="app">
    <!-- 2.我们在使用这个组件时，想要把数据以其他形式展示 -->
    <mycom>
     <!-- 4.父组件获取到该子组件的数据，自定义其展示方式，替换插槽 -->
     <div slot-scope="myslot">
       <span v-for="item in myslot.cdata">{{item}} - </span>
     </div>
    </mycom> 
  </div>

  <template id="com">
    <div>
      <!-- 3.绑定子组件中的数据到cdata关键字 -->
      <slot :cdata="options">
        <!-- 1.数组在子组件中是使用列表的方式展示的 -->
        <ui>
          <li v-for="option in options">{{option}}</li>
        </ui>
      </slot>
    </div>
  </template>

  <script>
    var vm = new Vue({
      el: '#app',
      components: {
        'mycom': {
          template: '#com',
          data() {
            return {
              options:['aaa','bbb','ccc']
            }
          },
        },
      }
    })
  </script>