微语:代码适合中午敲,早晚出BUG
Vue3组件如何进行值的传递 Vue
子传父:子组件用defineEmits传递
//子组件
<template>
<div>
<button @click="btn">我的按钮</button>
</div>
</template>
<script setup>
import { ref } from "vue"
let sex = ref(2000)
let $emit = defineEmits(['sex'])
let btn = () => {
$emit('sex', sex.value)
}
</script>
//父组件
<template>
<div>
<MyButton @sex="fys" />
</div>
</template>
<script setup>
let fys = (val) => {
console.log(val);
}
</script>
父传子: 使用defineProps来接收
//父组件
<template>
<MyButton :msg="access" />
</template>
<script setup>
let access = '今天天气不错'
</script>
//子组件
<template>
<div>
<button>我的按钮</button>
{{ props.msg }}
</div>
</template>
<script setup>
const props = defineProps({
msg: {
type: String,//参数类型
required: true,//是否必传
default: '天气状态' //默认值
}
});
</script>
简化版传递
父传子 世界使用defineProps(['参数名1'],[‘参数名2’])方式来接收
//父组件
<template>
<div>
<MyButton sex="2000" />
</div>
</template>
//子组件
<template>
<div>
<button>我的按钮</button>
</div>
</template>
<script setup>
let props = defineProps(['sex'])
console.log(props.sex);
</script>
子传父 使用$emit在标签上面直接传递参数 @click="$emit('msg', aa)" msg为事件名,aa为参数
//子组件
<template>
<div>
<button @click="$emit('msg', aa)">我的按钮</button>
</div>
</template>
<script setup>
let aa = '天气不错'
</script>
//父组件
<template>
<MyButton @msg="as" />
</template>
<script setup>
let as = (val) => {
console.log(val);
}
</script>
数组扁平化处理 JavaScript
有一个多维数组
const arr = [1, [2, 3, [4, [5]]], 6];
要求转换成:
[1,2,3,4,5,6]
可以使用一下方法解决:
方法一:
const arr = [1, [2, 3, [4, [5]]], 6];
const flattenedArr = arr.flat(Infinity);
console.log(flattenedArr);
方法二:
const flat = arr => arr.reduce((prev, curr) => Array.isArray(curr) ? [...prev, ...flat(curr)] : [...prev, curr], []);
console.log(flat(arr))
方法三:
const flat = arr => {
const flattenedArr = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
flattenedArr.push(...flat(arr[i]));
} else {
flattenedArr.push(arr[i]);
}
}
return flattenedArr;
};
console.log(flat(arr));
uniapp调用微信支付功能 uniApp
HTML
<template>
<view class="content">
<input v-model="val" />
<button @click="clickPay">点我扣款</button>
</view>
</template>
JavaScript
<script>
export default {
data() {
return {
title: 'Hello',
val: 0.1
};
},
methods: {
clickPay() {
let _this = this;
//1.调用登录 获取code
uni.login({
provider: 'weixin',
success(res) {
//2.调用微信官方接口,拿code去换openid
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: {
appid: 'wx4f27fd51b9a7bfda',
secret: '1a9bfee5a8155f0020c5857cd9038674',
js_code: res.code,
grant_type: 'authorization_code' //固定值
},
success(obj) {
console.log(obj.data.openid, '用户真实openid............');
console.log({
openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
name: '电吹风体验卷',
money: _this.val,
code: '851230012314156910598',
payType: 1,
clientIp: '127.0.0.1'
});
//3.调用后端接口 拿到所需要的数据
uni.request({
url: 'http://api.100qhl.com:5024/v1/order/createOrder',
method: 'POST',
data: {
openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
name: '好洗的地毯',
money: Number(_this.val),
code: '8512300123149105999015',
payType: 1,
clientIp: '127.0.0.1'
},
success(res) {
console.log(res, '后端返回参数完毕.....');
//4.调用官方接口扣钱!!!!
uni.requestPayment({
timeStamp: res.data.data.timeStamp,
nonceStr: res.data.data.nonceStr,
package: res.data.data.packageValue,
signType: res.data.data.signType,
paySign: res.data.data.paySign,
complete(res) {
console.log(res,
'扣款返回的结果.~~~~~~~~~~~~~~~~~');
}
});
}
});
}
});
}
});
}
}
};
</script>