微信小程序自定义组件VS vue组件实践与理解

小程序官网的注解:自定义组件-页面复杂功能的拆分或多页面的重复使用。
一般而言,我们想着要提取组件了,也的确用于上面那两个目的。

小程序-创建组件

小程序创建组件,一个组件由4个文件组成,和创建页面类似。包含:json、wxml、wxss、js文件。
一个简单的demo:
json

{
  "component": true
}

wxss

.bg-red {
  background: red;
}

js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

以上,基本创建一个component会,编辑器会自动生成,无需手动书写。非常方便!!

那么,有了操作上的实现后,具体子组件要怎么和父组件交互呢?

父子组件交互

子组件建立好上文的初始化模板后,就可写具体的业务场景、功能逻辑啦~
比如,获取验证码的弹框(实际应用肯定不止一项),demo简单处理,为了不占太大的篇幅,代码不粘贴了,自己写写类似的很快的。
效果截图

页面编译的子组件代码渲染截图:

上图红框部分就是小程序子组件编译后的页面,子组件引入的标签不会被拆解,里面还会自动生成一个叫做“#shadow-root”的层,用于隔绝父组件的元素class类和子组件的元素class类,所以同一个类样式在子组件的使用,都需要重新在子组件中定义样式,这时候缺点就暴露了,很多我们定义的共用样式类在这种渲染模式下是无法使用的,遗憾有之~。如果复杂组件又引用超级多共用样式的,就会造成很多css的代码冗余。但是……,塞翁失马焉知非福!用着用着就发现了一大好处,这种隔离,对于弹框等就算组件复杂,父子组件业务偶尔比较低的情况,开发子组件非常有利,比如:多个弹框,弹框嵌弹框也可以直接写在子组件,因为#shadow-root会自行做隔离。另:子组件内的标签(a,button,li等)样式是可以复用公共定义,无需重写

小程序自定义组件VS vue子组件

  1. 父子传值:(小程序)properties,(vue)props
    父子传值两个写法比较相似,就是关键字有些不同,过渡学习基本无障碍的。
    小程序 js文件
properties: {
    modalVisible:{  //modalVisible父子传递用的字段
      type: Boolean,
      value: false
    }
  },

vue

props: {
      title: {  //title父子传递用的字段
          type: String,
          default:''
      },
  }
  1. 事件传递:(小程序)triggerEvent(vue)$emit

小程序 js文件

myFunction(){
    this.triggerEvent('ok', this.data.codeValue);//'ok'事件名称,codeValue子组件内data中定义的变量
}

vue

myFunction(){
    this.$emit('ok', data);//'ok' 事件名称,data子组件内定义的变量
}
  1. 卡槽 均用 <slot></slot>
  2. 调用组件 (小程序)需要父子组件均定义,(vue)父组件直接引用
    小程序 JSON文件
//父组件
{
    "usingComponents": {
        "cell-temp": "../../components/cell-temp/cell-temp"  //路径
      }
}
//子组件
{
    "component": true,  
}

VUE

import DocImageFeild from "./subcomponent/doc-image-feild"
export default {
   components: {
       DocImageFeild
   },
}
  1. DOM结构处理:(小程序)单独隔离;(vue)直接模板注入

结语

小程序还在初学阶段,后续后更多的理解会持续更新,同行们有更多实践理解也欢迎沟通,同步成长!!