class11：父子组件传值、behavior共享和Vant Weapp的使用

最新推荐文章于 2024-08-23 09:30:00 发布
最新推荐文章于 2024-08-23 09:30:00 发布
阅读量716 收藏 1
点赞数
分类专栏： # 小程序开发 文章标签： 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51667621/article/details/125036596
版权

目录

一、父子组件传值

3种方法：

  • 组件属性传值；（只能用于父组件传递给子组件，不能同步-----传简单数据）
  • 通过绑定事件的方式传值；
  • 通过子组件实例对象的方式。

1.组件属性传值：父传子

父子组件不能同步数据，只能传递简单数据-----几种基本类型：

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>父组件的num：{{num}}</view>
<view>------------------------</view>
<my_test01 num="{{num}}"></my_test01>

// pages/home/home.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        num: 522731
    },
})

<!--components/test01/test01.wxml-->
<view>子组件接收到的num：{{num}}</view>
<button bindtap="changeNum">点击修改</button>

// components/test01/test01.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        num:Number
    },
    /**
     * 组件的方法列表
     */
    methods: {
        changeNum(){
            this.setData({
                num:this.properties.num + 1
            })
        }
    }
})

在这里插入图片描述

2.通过绑定事件的方式传值：子组件调用父组件的函数并传参

在父组件中定义事件函数传递子组件修改的数值， bind:sync="syncNum"中bind表示绑定事件，sync为该绑定事件的一个属性（可自定义），syncNum为绑定事件的名称。

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>父组件的num：{{num}}</view>
<view>------------------------</view>
<my_test01 num="{{num}}" bind:sync="syncNum"></my_test01> 
<!-- sync可自定义名字，表示绑定事件的属性 -->

在子组件的事件函数changeNum中定义this.triggerEvent()函数，即当此时调用父组件中的事件函数syncNum，并将子组件中修改后的新值赋给父组件事件函数的某个属性（通过实参传递实现）。

在triggerEvent()函数中：第一个参数需与绑定事件时携带的属性同名，第二个参数是函数调用时的实参。

// components/test01/test01.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        num:Number
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changeNum(){
            this.setData({
                num:this.properties.num + 1,
            });
            // 调用父组件绑定在子组件的事件函数
            this.triggerEvent("sync", {newNum:this.properties.num}); //第一个参数需与绑定事件时携带的属性同名，第二个参数是函数调用时的实参
        }
    }
})

在调用父组件的事件函数后，变化后的新值通过事件对象e获取，反传回来的新值存在于事件对象的detail中。然后获取新值赋给父组件中的num最后实现父子组件中的数据同步。

// pages/home/home.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        num: 522731
    },

    // 在父组件中定义事件函数，用于同步产生变化的数据
    // 该函数通过事件对象e接收反传回来的新值
    syncNum(e){
        console.log(e) // 反传回来的新值存在于事件对象的detail中
        this.setData({
            num: e.detail.newNum
        })
    },
})

在这里插入图片描述
在这里插入图片描述

3.获取子组件的实例对象，访问子组件内的任意数据、方法

在子组件标签中定义id或者类标签，当点击按钮时通过事件函数获取子组件的实例对象。

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>父组件的num：{{num}}</view>
<view>------------------------</view>
<my_test01 num="{{num}}" id="childTest"></my_test01>
<button bindtap="getChild">获取子组件的实例对象</button>

通过selectComponent() 获取组件的实例对象，括号内的字段需与之前定义的id或类标签定义的名字相同，同时加上前缀 "#“或” . "。

通过打印子组件的实例对象可以看到子组件的num值以及定义的事件函数。也即可以获得。

// pages/home/home.js
Page({
    getChild(){
        // 获取子组件的实例对象
        const child = this.selectComponent("#childTest");
        console.log(child);
        child.setData({
            num: child.properties.num + 1
        })
    },
})

在这里插入图片描述

修改父组件中的num值，实现数据同步：

// pages/home/home.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        num: 522731
    },
    
    getChild(){
        // 获取子组件的实例对象
        const child = this.selectComponent("#childTest");
        console.log(child);
        child.setData({
            num: child.properties.num + 1,
        }),
        
        // 修改父组件中的num值，实现数据同步
        this.setData({
            num: child.properties.num
        })
    },
})

在这里插入图片描述

二、behavior共享-代码块的共享

1.behavior的使用

新建一个behavior文件夹，用来存放可以共享的代码块，新建my-behavior的js文件。在该文件调用Behavior方法，该方法接收一个对象，该对象的组成与组件components相同。并通过module.exports导出代码块。不要将不公开的内容放进去。
在这里插入图片描述

// 在组件中共享的代码块：数据、属性、方法
module.exports = Behavior({
    data:{

    },
    properties:{

    },
    methods:{
        
    }
})

在组件中导入并使用behavior：

// components/test01/test01.js

// 导入behavior
const myBehavior = require("../../behavior/my-behavior");

Component({
    // 将behavior实例挂载到组件的behaviors节点上
    behaviors:[myBehavior],

    /**
     * 组件的初始数据
     */
    data: {
        userName: "Kobe"
    },
})

示例：当behavior和组件components中都存在相同属性userName时，组件自身的属性会覆盖behavior的同名属性。

更多覆盖规则见网址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

<!--components/test01/test01.wxml-->
<view>{{userName}}</view>

// components/test01/test01.js

// 导入behavior
const myBehavior = require("../../behavior/my-behavior");

Component({
    // 将behavior实例挂载到组件的behaviors节点上
    behaviors:[myBehavior],

    data: {
        userName: "Kobe"
    },
})

// behavior/my-behavior.js
// 在组件中共享的代码块：数据、属性、方法
module.exports = Behavior({
    data:{
        userName:"LeBron"
    },
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、Vant Weapp的使用

1.安装及配置

  • 进入微信开发者工具使用的文件目录下；
  • 初始化 npm init -y （会生成package.json文件）
    在这里插入图片描述
    在这里插入图片描述
  • 安装 npm i @vant/weapp -S --production （快速上手 - Vant Weapp (oschina.io)）可指定版本：npm i @vant/weapp@+版本号 -S --production ；
  • 删除app.json中的版本号：“style”: “v2”；
  • 修改 project.config.json：开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置；
    注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可。
{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}
  • 构建npm包：打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。设置使用npm模块。
    在这里插入图片描述

2.使用方法

可以在全局或页面引用组件，例如在全局引入按钮：

// app.json
{
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
}

<!--pages/home/home.wxml-->
<van-button>默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

在这里插入图片描述

3.定制主题

定制主题官方文档: https://vant-contrib.oschina.io/vant-weapp/#/theme

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量( https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在链接: https://caniuse.com/css-variables 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量
定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考配置文件： https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f8f8f8;
@background-color-light: #fafafa;

/* 在页面根节点page中定义修改组件颜色的变量 */
page{
    --button-info-background-color: #ff0;
    --button-info-background-color: #f00;
}
Laker 23
关注
专栏目录
vue，vant父子组件传值props
Yanfengting的博客
04-14 3962
父组件 <template> <div id="head" class="head"> <span class="title-left" @click="goBack"> <van-icon name="arrow-left" class="leftback" /&g...
微信小程序（四）基础加强，包括（自定义组件、使用npm包、全局数据共享MobX、分包等）
weixin_60896381的博客
08-24 1960
本文包含微信小程序基础加强等内容，参考于黑马PPT通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（自定义组件、使用npm包、全局数据共享MobX、分包等）如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正
React 学习——Class类组件之间传参（ 父《=》子 ）
最新发布
qq_40269801的博客
08-23 281
React Class类组件之间传参（ 父《=》子 ）
react组件传值-class的传值方式
分享互联网的有趣知识~
10-07 796
react组件传值，class的传值方式 注意：子组件是无法直接更改数据的，需要把数据回传到父组件，利用父组件更新数据来更新渲染视图。
vue，vant父子组件传值props，一文轻松搞定
2401_83977689的博客
03-30 555
title: ‘我的’,子组件class=“leftback” />返回{{title}}props: {// default: ‘首页’,},vue父组件异步获取数据传给子组件下面这个更加直观一点学习下下面来看我操作})})打印一下给子组件传数据。
vue 子组件向父组件传值 （vue+vant h5移动端）
蓝胖子的博客
07-27 406
前提：同一个页面根据接口返回的状态渲染不同的组件 遇到的问题:审核失败后需要重新录入资料， 点击重新提交资料，当前页面怎么渲染为提交资料页面? 牵涉到的页面，目录如下： index.vue :主页面：根据状态渲染不同的组件 审核失败页面：veteransFail.vue 提交资料页面：submitVeterans.vue 1.子组件：veteransFail.vue (审核失败页面) 实现思路：点击重新提交资料按钮 ，改变状态值，是状态值为提交资料的状态值，并且传递给主页面（父组件：index.vue
微信小程序第四天
weixin_45732235的博客
06-27 1165
微信小程序第四天学习笔记
原生微信小程序开发学习笔记（零基础）
qq_33365152的博客
09-08 333
原生微信小程序开发学习笔记（适合零基础）
微信小程序基础
weixin_50311528的博客
07-31 313
微信小程序 微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.WXML模板 1. view 实现布局效果 2. scroll-view 可滚动的视图区域 3. swiper swiper-item 轮播图和轮播图item组件 属性： indicator-dots 是否显示面板指示点 indicator-color 指示点颜色 indic
关于微信小程序（随记）
Ajiangwa的博客
08-29 1041
小程序一、小程序与普通网页开发的区别？1.1 区别1.2 小程序代码构成1.3 WXML1.4 WXSS1.5 JS文件的分类二、小程序宿主环境2.1 手机微信2.2 包含的内容2.3 通信模型2.4 运行机制2.5 组件2.6 API 三大分类2.7 协同工作和发布 一、小程序与普通网页开发的区别？ 1.1 区别 1.2 小程序代码构成 项目的基本组成结构： pages 用来存放所有小程序的页面，每个页面都是一个单独的文件夹 utils 用来存放工具性质的模块 app.js 整个小程序项目的入口文件
(精华2020年5月20日更新) vue教程篇 父子组件相互传参
热门推荐
一点一滴
05-06 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传参组件&lt...
Vue 组件 + 组件之间传值 + 组件插槽
qq_53283188的博客
06-05 631
文章目录一、组件注册1. 全局注册 一、组件注册 组件就是把各自独立的积木拼成一个整体进行数据交互 1. 全局注册 组件注意事项 全局组件 注册后，任何 vue实例 都可以用 组件参数的data值必须是函数同时这个函数要求返回一个对象 组件模板必须是单个根元素 组件模板的内容可以是模板字符串 Vue.component('组件名称', { data: function () {return{}}, // data 在这里是函数 template: '模板' }) 就是相当于封
vue，vant父子组件传值props，2024年最新轻松面试问题
2401_83974117的博客
04-10 285
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
vue父子组件传递参数详解
weixin_47127690的博客
10-10 282
/ 下面是 像父组件传递参数 如上面 子组件的 点击事件 ：@click="clickTitleParent()"// navClick 是父组件要时间的 点击事件的方法，后面的值 是要传递过去的参数，可以是字符串，布尔，数组等。子组件 ： 要传递给父组件参数，或者接收父组件传递过来的参数，取的名字 要和 父组件里面引用的组件名字一样。// 这里面接收父组件传过来的参数 ，并设置params的格式。// 子组件传递过来的参数，需要在父组件的点击事件中，接收。// 用 import 引入子组件的地址。
Vant Weapp小程序蹲坑之事件名称问题及解决方案
weixin_33831196的博客
02-27 2395
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。值得褒奖的是，Vant Weapp 组件库更新非常迅速，平均每10天左右提交一个小版本的更新，至今最新的版本为0.5.5。 问题 但是，让人颇有遗憾的是，其提供的6大类共37个组件中，有四个组件的事件命名存在问题，即下图中加红色底纹的四个： 解决办法 在...
微信小程序 behaviors 组件之间数据共享
Shimeng_1989的博客
04-14 812
behavior：被共享的属性、数据、方法等，类似vue中的 minx behavior中， 也可以引用其他 behavior 每个组件，可以引用多个 behavior 同名字段的覆盖 和 组合规则：（3种）具体可参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html 同名的数据字段（data） 同名的属性（properties) 和方法（methods）
子组件调用父组件中方法的方法
weixin_63456913的博客
11-22 906
子组件调用父组件的方法
behaviors
爸ba的博客
06-13 795
在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码如下。调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用。// 2 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中，即可生效。// 1、使用 require() 导入需要的自定义 behavior 模块。// 调用 Behavior() 方法，创建实例对象。
uniapp使用组件调用vant weapp的Dialog
05-23
要在uniapp中使用vant weapp的Dialog组件，需要先安装vant weapp插件。安装方法如下： 1. 在HBuilderX中打开你的uniapp项目； 2. 在左侧的菜单中选择“插件市场”； 3. 搜索“vant weapp”并安装。 安装完成后，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laker 23

要秃啦，支持一下嘛~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值