一、组件化开发

Vue组件化思想

组件化是vue.js中的重要思想

1.它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

2.任何的应用都会被抽象成一颗组件树

注册组件的基本步骤：

创建组件构造器：调用Vue.extend()方法

注册组件：调用Vue.component()方法

使用组件：在Vue实例的作用范围内使用组件

组件化的基本使用

创建组件的方法：Vue.extend({对象})

注册组件的方法：Vue.component()

<body>
  <div id="app">
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>

  <script src="../js/vue.min.js"></script>
  <script>
    //1.创建组件
    const cpn = Vue.extend({
      template:`
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈</p>
        <p>我是内容，呵呵呵</p>
      </div>`
    });

    // 注册组件
    // Vue.component('组件的标签名，就是使用在html里面的标签',cpn);
    Vue.component('my-cpn',cpn);

    const app = new Vue({
      el:'#app',
      data:{},
      methods: {
      },
    })
  </script>
</body>

全局组件和局部组件

当我们通过调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue实例下使用；如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件

父组件和子组件

父子组件的通信

子组件是不能引用父组件或者Vue实例的数据的。

但是，在开发中，往往一些数据确实需要从上层传递到下层：

比如在一个页面中，我们从服务器请求到了很多的数据。

其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。

这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。

如何进行父子组件间的通信呢？Vue官方提到

通过props向子组件传递数据父传子

通过事件向组件发送消息子传父

Props基本用法

在组件中，使用选项props来声明需要从父级就收到的数据

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

父传子

在组件中，使用选项 props 来声明需要从父级接收到的数据

1. 字符串数组，数组中的字符串就是传递时的名称

2.对象形式：对象可以设置传递时的类型，也可以设置默认值和类型等

子级向父级传递（自定义事件）

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据时，就要用到自定义事件了，之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件

自定义事件的流程：

在子组件中，通过$emit() 来触发事件。

在负组件中，通过v-on 来监听组件事件。

<body>
  <!-- 父组件模板 -->
  <div id="app">
    <!-- 第三步：使用组件 -->
    <!-- 第五步：父组件接受子组件发来的事件 -->
    <cpn @cpnclick="itemclick"></cpn>
  </div>
  

  <!-- 子组件的模板 -->
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>  


  <script src="../js/vue.js"></script>
  <script>
    // 第一步：定义子组件
    const cpn = {
      template:'#cpn',
      // 自定义组件里面data是一个函数，并且返回的是对象
      data(){
        return{
          // 假数据：分类
          categories:[ 
            {id:'a',name:'热门推荐'},
            {id:'b',name:'手机数码'},
            {id:'c',name:'家用家电'},
            {id:'d',name:'电脑办公'}
          ]
        }
      },
      // 组件里面添加方法
      methods: {
        btnClick(item){
          console.log(item);
          // 第四步：子组件向父组件发射事件
          // 在这里自定义的事件名字尽可能用小写
          this.$emit('cpnclick', item)
        }
      },
    }

    //根组件
    const app = new Vue({
      el: '#app',
      data:{},
      //第二步：注册组件
      components:{
        cpn
      },
      methods:{
        // 父组件中的方法，用来接收到子组件发来的事件
        itemclick(item){
          console.log('itemClick',item);
        }
      }
    })
  </script>
</body>