微信小程序四种父子相互传值方式

1. 绑定自定义属性（父传子），触发自定义方法（子传父）

原生微信小程序+uni-app都可以实现

父组件：

<template><view class="content"><h2>{{value}}</h2><progress percent="100" color="#10AEFF" active stroke-width="3" /><zHeader class="text" :message="msg1" @getMessage="getMessage">{{msg1}}</zHeader><view class="progress-box"><progress percent="100" color="#10AEFF" active stroke-width="3" /></view><zFooter class="text">{{msg2}}</zFooter><progress percent="100" color="#10AEFF" active stroke-width="3" /><h2>{{value}}</h2></view>
</template><script>import zHeader from "../../components/z-header/z-header.vue"import zFooter from "../../components/z-footer/z-footer.vue"export default {data() {return {value:'我是父组件',msg1: '父组件填充内容给z-header子组件',msg2: '父组件填充内容给z-footer子组件'}},onLoad() {},methods: {getMessage(msg){console.log('z-header触发父组件的自定义方法，父组件获取子组件的值：',msg);}},components: {zHeader,zFooter}}
</script><style>h2,h4,.text{text-align: center;}progress {margin: 10px;}
</style>

子组件：

<template><view><h4>z-header</h4><slot></slot><h4>z-header</h4></view>
</template><script>export default {data() {return{}},props:{message:{type:String}},onLoad() {},onReady(){console.log('z-header接收到父组件参数：',this.message);this.$emit('getMessage','z-header传送给父组件的值')},methods: {}}
</script><style>
</style>![请添加图片描述](https://img-blog.csdnimg.cn/324986d40176418abcfdcd1cc38f2ad6.gif)

输出：

原生微信小程序使用 properties 和 this.triggerEvent 来接收自定义属性和触发自定义方法
uni-app框架使用 prop 和 this.$emit 来接收自定义属性和触发自定义方法（和vue一样）

2. 使用 `getApp().属性名或方法` 调用`app.js` 中的属性或方法（父传子/子传父）

原生微信小程序可以实现

app.js

state:{username:'zs',age:18},

父子组件：

console.log('父组件获取app.js中的数据:',getApp().state);

输出:

3. 异步方法 `uni.getStorage()` 和同步方法 `uni.getStorageSync()` （父传子/子传父）

原生微信小程序+uni-app都可以实现

父组件：

         uni.setStorage({key:'username',data:'法外狂徒张三',success:function(){console.log('调用成功的回调');}})

子组件：

         uni.getStorage({key:'username',success:function(res){console.log('z-header子组件获取成功:',res.data);}})

输出:

4. 在父组件里调用 `this.selectComponent('.my-component')` 获取子组件的实例对象（父传子/子传父）

原生微信小程序+uni-app都可以实现

父组件：

      const child=this.selectComponent('.header')child.getUsername()

子组件：

  methods: {getUsername(){console.log('子组件的名字');}}

输出：

微信小程序四种父子相互传值方式相关推荐

微信小程序四种json配置文件详解
知识点: app.json配置文件 project.config.json配置文件 sitemap.json配置文件页面文件夹中的.json配置文件上片文章讲到微信小程序有四种json配置文件, ...
微信小程序四种弹窗方式
微信小程序弹窗一.wx.showToast(Object object) 二 .wx.showModal(Object object) 三.wx.showLoading(Object object) ...
微信小程序组件与页面互相传值
微信小程序组件与页面互相传值 1.外界对组件内部传值(父传子) 组件properties属性的应用 ① 定义组件内部要接受外部的值 ② 定义页面要传输给组件内部的值 ③ 传输数据 ④ 组件内部对pro ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
微信小程序与h5通过web-view传值
小程序web-view是承载网页的容器,会自动铺满整个小程序页面. 微信小程序 .wxml <view><web-view src="{{webUrl}}" bi ...
微信小程序：数据存储、传值、取值
小程序界面传值父级界面:A界面子级界面:B界面一.url传值详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面用 navig ...
微信小程序align_微信小程序四色花瓣
效果展示 Demo代码 wxml <view class="loading-screen"> <view class="loading"> ...
微信小程序四（设置底部导航）
好了小程序的头部标题设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步 ...
微信小程序跳转h5页面的方式
通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1.使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二 ...

微信小程序四种父子相互传值方式

微信小程序四种父子相互传值方式

1. 绑定自定义属性（父传子），触发自定义方法（子传父）

2. 使用 `getApp().属性名或方法` 调用`app.js` 中的属性或方法（父传子/子传父）

3. 异步方法 `uni.getStorage()` 和同步方法 `uni.getStorageSync()` （父传子/子传父）

4. 在父组件里调用 `this.selectComponent('.my-component')` 获取子组件的实例对象（父传子/子传父）

微信小程序四种父子相互传值方式相关推荐

最新文章

热门文章

微信小程序四种父子相互传值方式

微信小程序四种父子相互传值方式

1. 绑定自定义属性（父传子），触发自定义方法 （子传父）

2. 使用 getApp().属性名或方法 调用app.js 中的属性或方法（父传子/子传父）

3. 异步方法 uni.getStorage() 和 同步方法 uni.getStorageSync() （父传子/子传父）

4. 在父组件里调用 this.selectComponent('.my-component') 获取子组件的实例对象（父传子/子传父）

微信小程序四种父子相互传值方式相关推荐

最新文章

热门文章

1. 绑定自定义属性（父传子），触发自定义方法（子传父）

2. 使用 `getApp().属性名或方法` 调用`app.js` 中的属性或方法（父传子/子传父）

3. 异步方法 `uni.getStorage()` 和同步方法 `uni.getStorageSync()` （父传子/子传父）

4. 在父组件里调用 `this.selectComponent('.my-component')` 获取子组件的实例对象（父传子/子传父）