unicloud中的export default 和data()函数的作用说明

最新推荐文章于 2024-06-15 23:52:57 发布

鼾声鼾语

最新推荐文章于 2024-06-15 23:52:57 发布

阅读量1.5k

点赞数 2

文章标签：计算机视觉人工智能 ros操作系统 uniapp unicloud

本文链接：https://blog.csdn.net/pvmsmfchcs/article/details/123897828

版权

A–unicloud代码的vue组件有的写成export default，有什么用？
1声明一个vue，相当于 new Vue({})
2达到可复用的目的，也就是说，export default 相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。
export default和export的用法参考：https://www.cnblogs.com/fger/p/11994968.html
B–在export default中的data()函数是做什么的？
起到局部变量的作用，配合export default的话，就可以给其他引入的组件一个初始化的数据。也就是说，这个data（）中return的变量和方法只限于当前声明此data（）的组件使用。如果全局vue有个变量叫 user,当前组件也有个变量叫user，那vue里面的到底用哪个？所以data()就起到了变量隔离的一种效果。一般做数据初始化作用，如下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
</div>

<script>
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 3
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    </button>`
})
app.mount('#app')
</script>
</body>
</html>

运行结果：
在这里插入图片描述

如下面的代码：

<template>
	<view class="content">
		<button @click="hello">调用云函数</button>
		<input type="number" v-model="num1" />
		<input type="number" v-model="num2" />
		
		<button v-for="(item,index) in mathDels" @click="maths(item)" :key="index">{{item}}</button>

		<text>{{result}}</text>
		<text>云函数介绍{{introduce}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num1:0,
				num2:0,
				result:0,
				mathDels:['add','reduce','mul','division'],
				introduce:""
			}
		},
		onLoad() {
			
		},
		methods: {
			async maths(type){
				const maths = uniCloud.importObject('maths');
				this.introduce = await maths.intro()
				let res = await maths[type](parseInt(this.num1),parseInt(this.num2))
				this.result = res
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.map-mine {
		width: 100%;
		height: 50vh;
	}
</style>

鼾声鼾语

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
unicloud中的export default 和data()函数的作用说明

A–unicloud代码的vue组件有的写成export default，有什么用？1声明一个vue，相当于 new Vue({})2达到可复用的目的，也就是说，export default 相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。export default和export的用法参考：https://www.cnblogs.com/fger/p/11994968.htmlB–在export default中的data()函数是做什么的？起到局部变量的作用，配合
复制链接

扫一扫