Vue组件化梳理

一、组件化

（1）：全局组件与局部组件的定义

组件定义的步骤：
1：组件注册
2：组件的模板定义与绑定
3：组件的使用
注意点：
/*全局组件
01:全局组件：Vue.component(name,options)
name:为组件名称
options：为组件的配置参数(是个对象)
template:只能是有一个根节点

  组件用途：
    复用---（每一次返回一个对象）为了达到复用的时候，每一个为独立的数据

  三段论：
    大前提：Vue有着以下配置参数（data，directives,methods等)
    小前提：组件是一个Vue实例
    结论：组件具有与Vue实例一样的配置参数 但是没有el，其中data必须为函数（返回一个对象）
 */

 

    
    

  
  
  

  //1:定义一个全局组件
    Vue.component('cpm', {
      data() {
        return {
          name: 'liang',
          age: 22,
          sex: 'nan'
        }
      },
      //2-2:利用选择器绑定模板
      template: "#cpm",
      //01：定义局部组件
      components: { //全局组件里面可以定义局部组件
        myHeader: { //header为局部组件名称，{}为配置参数
          template: `
cpm组件的头部
`
        },
        myFooter: {
          template: `
cpm组件的尾部
`
        }
      },
      methods: {

      }
    })
    //这是根组件
    const vm = new Vue({
      el: "#app",
      data: {

      },
      methods: {

      },
      directives: {

      },
      componets: {

      }
    })

二、父子组件的通讯

//父子组件的通讯
// 一般而言，一些数据都是在大组件发送请求数据，然后向下层传递数据
// 父子间的通讯有两种方式
//1:通过props属性向子组件传递数据
//2：通过事件向父组件发送消息

  2：props属性名命名规则
    01：如果props中使用驼峰命名法，模板中(html)则需要使用-来划分（buttonContent ：button-content）
    02：字符串形式的模板则没有这个限制
  3:props属性值类型
    01：字符串-String  02：数值-number
    03：布尔值-boolean  04：数组-Array 05：对象-Object---常用
// 注意点：首先是父组件的数据（本身定义一个局部组件），然后通过属性绑定的方式， ，然后在子组件里面通过props属性接受

（1）： 父组件向子组件传值

步骤：
1：定义父组件—里面定义行数据
2：再父组件内部定义一个局部组件（子组件用于接收父组件传递值）
注意点：在里面使用了 对象的字面量增强写法 本来是cpm:cpm
3：对子组件的抽离出去的进行定义–
01：模板的定义和绑定
02：数据的传递与接收 传递是在Vue实例中（cpm例如属性的绑定来传递的），props接收传递的值
03：其中prop可以输数组，对象，字符串等 可以提高默认值
04：最后在模板中使用数据

 

    
    
  
  
  

  //01-2：子组件的定义（抽离出来）
    const cpm = {
      template: '#cpm',
      // props: ['cmovies', 'cmsg'],//数组类型
      props: { //其中prop可以输数组，对象，字符串等  可以提高默认值
        cmovies: {
          type: Array,
          defalute() { //类型为数组或者对象的时候，默认值是一个函数，有返回值（数组或者对象）
            return []
          },
          required: true, //必须传递这个属性
        },
        cmsg: {
          type: String
        }
      }
    }
    //1:定义父组件
    const vm = new Vue({
      el: "#app",
      data: {
        msg: '你好啊',
        movies: ['火影', '蓝色', '佳佳']
      },
      // 01-1：定义子组件
      components: {
        // 'cpm': {
        //   //假如是 'cpm':cpm的话，则是被抽离到外部，需要在外面定义组件 const cpm  
        // },
        cpm //或者直接简写 cpm（则是被抽离到外部，需要在外面定义组件 const cpm  ） 
        // 对象的字面量增强写法 本来是cpm:cpm
      }
    });

（2）： 父组件向子组件传值（驼峰写法）

（3）： 子组件向父组件传值

/*
子组件向父组件发送数据的步骤：
01：定义子组件
02：子组件模板 并且子子组件进行绑定（id）
03:对子组件内的数据进行定义并且在模板渲染
04-子组件向父组件发送点击事件
  注意点：1：子组件发射事件1-定义btnclick事件（并且发生参数）
         2：子组件发射事件2-btnclick事件 发射事件itemclick（自定义一个事件）
         3：子组件发射事件3，在父组件（引用了cpm组件）监听该事件,并且化为cpmclick事件再父组件处理
         4：在父组件的方法里面，做输出等
*/

   
  

    
    
  
  
  
  
//01-2：定义一个子组件模板和内容
    const cpm = {
      data() {
        return {
          catagories: [{
              id: 1,
              name: '胡奥'
            },
            {
              id: 2,
              name: '电器'
            }, {
              id: 3,
              name: '号码'
            }
          ]
        }
      },
      template: '#cpm',
      methods: {
        // 子组件发射事件2-btnclick事件 发射事件itemclick
        btnclick(item) {
          this.$emit('itemclick', item);
        }
      }
    }

    //1:定义父组件
    const vm = new Vue({
      el: "#app",
      data: {},
      //01-1：定义一个子组件
      components: {
        cpm
      },
      methods: {
        cpmclick(item) {
          console.log(item);
        }
      }
    })

三、组件访问

（1）：父访问子

 
  

    
    
    
    点击
  
  
  

 //01:定义一个父组件
    const vm = new Vue({
      el: "#app",
      data: {},
      methods: {

      },
      methods: {
        btnclick() {
          //1：利用$children来访问子组件的内容
          // console.log(this.$children);
          // this.$children[0].showMsg();
          // for (let i of this.$children) {
          //   console.log(i.name);
          // }
          //2:使用$refs来访问子组件的内容---常用 
          //2-1:首先需要定义ref属性（html中，并且有一个属性值，证明你需要取得的某个组件）例如：ref="aaa"
          this.$refs;
          console.log(this.$refs.aaa.name);
        }
      },
      //02：定义局部组件 组件{模板-数据-方法}
      components: {
        cpm: {
          template: '#cpm',
          data() {
            return {
              name: '我是子组件的name'
            }
          },
          methods: {
            showMsg() {
              console.log('showMsg');
            }
          }
        },
      }
    });

（1）：子访问父

 

    
  
  

//点击子组件的按钮，访问父组件的数据
    const vm = new Vue({
      el: "#app",
      data: {},
      components: {
        cpm: {
          template: '#cpm',
          methods: {
            btnClick() {
              //1：访问父组件---通过$parent
              console.log(this.$parent);
              //2：访问根组件
              console.log(this.$root);
            }
          }
        }
      }
    });

四、插槽

（1）：插槽的基本使用

slot插槽
目的：是的原来的设备具有更多的扩展性（slot标签：就是给组件留下预留空间）

1：就是在组件内部定义一个标签
2：插槽里面的默认值：按钮 
	假如cpm组件里面，在父组件使用的时候，里面没有任何标签，那么会加入button默认值
3：插槽的替换：按钮 
	假如cpm组件里面，在父组件使用的时候，里面没有有标签，那么会其他的标签作为整体把button替换了

  

    
    按钮
    我啊
    
      我
      
123
    
  
    

    const vm = new Vue({
      el: "#app",
      data: {},
      components: {
        cpm: {
          template: "#cpm"
        }
      }
    });

（2）：具名插槽的使用

具名插槽：
1：就是给标签起一个名字 比如 左边
2：使用的时候，需要替换那个插槽，就再父组件使用组件的时候，把插槽内的标签添加slot=“要修改的标签”
比如： 标题

  

    
    标题
    按钮