小程序父子组件通信及样式冲突

小程序组件创建

在components文件夹下创建组件 例如 : 如下

使用方式(全局)

在app.json "usingComponents": { "对应组件名": "对应的组件" }, 进行相关配置 在全局就可以使用

使用方式(局部)

上面的方式是全局注册类似于vue项目中 在main.js中 通过vue.component('组件名','组件') 的注册方法

局部的话在需要使用的界面的json中进行注册 和上面的方式一样

例子:

修改子组件的样式

在vue中使用element-ui 或者使用vant 或者是使用其他第三方的组件库 在对组件库的样式出现不满意的情况都会考虑覆盖修改 一般使用 scss就会使用 ::v-deep 或者 :deep() 但是在小程序中没有

小程序样式修改的方式

在子组件中需要通过

js 复制代码
// components/navigation-bar/navigation-bar.js
// 组件 的使用 局部注册 在json => usingComponent:{ }
Component({
  // 小程序支持外界的样式 
  // 组件 允许外界来定制类  将对应的类暴露出去 
  externalClasses: ['custom-class', 'title-class',]
  // 需要通过这样的方式将对应的样式暴露出去
  }
})

在父组件需要

wxml 复制代码
<navigation-bar back custom-class="custom-class"/>
<!-- 暴露出来的类 就是对应的属性 直接赋值父组件的类就ok 类名完全可以随便写 -->
wxss 复制代码
.custom-class {
  color:aqua
}

组件的通信(父传子)

与vue中的使用大致相同 , 但有一点不同的是 我如果直接传过去一个属性 这个属性没有值 默认是Boolean值并且为true

组件的通信(子向父)

父组件定义数据<navigation-bar count="{{count}}" back custom-class="custom-class" /> 子组件接收数据 使用properties

js 复制代码
// components/navigation-bar/navigation-bar.js
// 组件 的使用 局部注册 在json => usingComponent:{ }
Component({
  // 小程序支持外界的样式 
  // 组件 允许外界来定制类  将对应的类暴露出去 
  externalClasses: ['custom-class', 'title-class',],
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true
  },
  properties: {
    // back: Boolean
    // 小程序中子组件 收父组件的数据 默认值使用value属性来声明 不是vue的default
    back: {
      type: Boolean,
      value: false
    },
    count: {
    type:Number,
    value:0
    },
    // 在小程序中接受数据 需要通过 value当默认值 在vue中使用的是default 这个地方要注意
    value: Number,
  },


})

修改数据使用的是this.triggerEvent('父组件绑定的事件名',传过去的值) 这一点在vue中使用的是this.emit() 用法是一模一样的

js 复制代码
// 子组件事件传值
decrement() {
      this.triggerEvent("update-count", this.properties.count - 1)
    },
wxml 复制代码
<navigation-bar bind:update-count="updatecount" count="{{count}}" back custom-class="custom-class" />
// 父组件接受
js 复制代码
 updatecount(e) {
    console.log(e.detail);
    this.setData({
      count: e.detail
    })
  },
  // 进行修改
相关推荐
qq. 28040339843 小时前
CSS层叠顺序
前端·css
喝拿铁写前端4 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.4 小时前
vue 路由
前端·javascript·vue.js
烛阴4 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91534 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing5 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学5 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪5 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡5 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪5 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试