封装vue组件

步骤一：创建子组件（封装内容）

1. 在components中创建vue文件
   （以settingSwitchTemplate.vue 为例）
   

2. 在settingSwitchTemplate.vue中画出抽象出的功能

   1）包含template和style 文件
   
   

   2）包含SCRIPT，在这里面书写正常的方法和我们需要接收参数的PROPS
   

   注意：加载顺序：props的优先级 > data中的优先级 > methods中的优先级

3. props参数说明参照官网：https://cn.vuejs.org/v2/api/#props

步骤二：父组件调用（调用地方）

1. 在父组件的script中引用和声明

   
   

2. 在template中使用

   

3. 父组件向子组件传递参数

   
   注意：这里的参数值是变量，从后端传递过来的值

4. 显示结果：我们这里只有一个，可以使用for循环显示多个，也可以调用多个此组件
   

   步骤三：子组件将数据回调给父组件

   1. 子组件方法中传参：使用$emit(“”,””)
      

      checkedDisplay当值改变的时候调取的方法，根据需要改变名称
      listenToChildEvent：对应我们父组件的声明方法的地方，根据需要改变名称
      this.childValue：表示将当前的值传递过去 ，根据需要改变名称
      

   2. 父组件中template接收值

      

      listenToChildEvent：和子组件名称一致
      childBySwitchValue：父组件自己定义的方法名称
      

   3. 父组件中接收方法

      

      childBySwitchValue：父组件template中的具体方法名
      childValue：子组件中传递过来的值的名称，和子组件名称一致,这里不用声明此变量
      

   注意：父组件中接收的方法childBySwitchValue是不能在父页面再次传值的，否则会覆盖掉子组件传递的值。