uni-app的基本使用

Posted 2021-07-08 fengshaopu

一、基本使用
1.创建
2.组件传值
3.组件拆分
一、创建
1.进入组件在创建路由的pages.json 中创建路由
注意事项：这里创建的理由不会自动生成文件不跟小程序需要手动去创建跟vue一样

2.在pages.json里面的pages下面创建路由

	{
			"path": "pages/user/user",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}

3.在pages文件夹下面创建user文件夹下面有user.vue
这里就跟vue一模一样语法都一样

tabBar使用
跟小程序一模一样

"tabBar": {  //底部导航
	    "list": [
			{
	      "pagePath": "pages/sy/sy", //路径
	      "text": "首页",  //底部文本
	      "iconPath": "static/tabbar1.png",   //图片开始
	      "selectedIconPath": "static/tabbar1-1.png" //图片结束
	    },
		
	
		{
		  "pagePath": "pages/user/user",
		  "text": "我的",
		  "iconPath": "static/tabbar4.png",
		  "selectedIconPath": "static/tabbar4-1.png"
		}
		]
	  }

二、组件传值

1. 1.父传子
   1.父传子的话在父组件挂载要传递的变量
   2.在子组件用props接收可以是数组也可以是对象
   2.子传父
   1.在子组件自定义事件
   2.在事件里面用emit(“事件名”,传递的变量) 变量是以emit的形式传递的
   3.在子组件接收事件

父传子：
1.得现把组件拆出去
我把hear拆出去了

2.在父组件中导入
用 import
然后在组件中注册一下在当前可以使用了

<script>
	import aaa from '../../commpoents/hear/index.nvue'
    export default {
	components:{
		aaa
	},
    data() {
	return {
	name:"我"
	}
	},
	onLoad() {

	},
	methods: {

	}
	}
</script>
**//这里注意因为呢uni-app呢是只用写这一个代码小程序什么都可以使用
所以这里不能用div 要用 view 相当于div 小程序不解析div ,其他的会解析成div**
<template>
	<view class="">
		购物车

		<aaa />
	</view>
</template>

然后组件父传子：

<aaa :name="name" /> //在父组件中挂载变量

export default {
	components:{
		aaa
	},
		data() {
			return {
				name:"我"
			}
		},
		onLoad() {

		},
		methods: {

		}
	}

子组件接收

	export default {
		props:['name']
	}
	//使用
	<template>
	
	<view>
		 头部
		 {{name}}
	</view>
</template>

3.子传父
1.在组件中自定义事件在下面用emit传递

 <button type="default" @click="dj">点击</button>
 <script>
	export default {
		props:['name'],
		data(){
			return{
				num:1
			}
			},
			methods:{
				dj(){      //自定义的事件名
				this.$emit("dj",this.num)  //emit的形式传递的
				}
			}
	}
</script>

在父组件中接收事件
简单的子传父就完事了

		<aaa :name="name" @dj="dj" />
		methods: {
		dj(num){
				this.num=num
			     console.log(this.num)
			   }

		       }