uniapp：学习笔记（持续更新。。。）

陆杨丶

已于 2022-07-28 11:54:46 修改

阅读量658

点赞数

分类专栏： uniapp 文章标签： vue.js javascript

于 2022-07-22 16:53:51 首次发布

本文链接：https://blog.csdn.net/Lyang666/article/details/125909449

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

1：动态绑定class和style的数组语法

2：作用域插槽

3：.sync修饰符（父组件和子组件传值的双向绑定）

4：vuex mapState辅助函数获取

前言：

主要记录一些官网中没怎么使用过的方法，笔记随着做项目而更新。。。

1：动态绑定class和style的数组语法

普通动态绑定使用过，数组语法的第一次见，如下：

<template>
	<view>
		<!-- class -->
		<view class="static" :class="[activeClass,errorClass]">111</view>
		<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
		<view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
		<!-- style -->
		<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isActive: true,
				activeClass: 'active',
				errorClass: 'text-danger',
				activeColor:"green",
				fontSize:50
			}
		}
	}
</script>
<style>
	.static{
		font-size:30rpx;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		font-size:60rpx;
		color:#DD524D;
	}
</style>

此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，如下：

 <template>
      <!-- 支持 -->
      <view class="container" :class="computedClassStr"></view>
      <view class="container" :class="{active: isActive}"></view>
      <!-- 不支持 -->
      <view class="container" :class="computedClassObject"></view>
 </template>
 <script>
      export default {
          data () {
              return {
                  isActive: true
              }
          },
          computed: {
              computedClassStr () {
                  return this.isActive ? 'active' : ''
              },
              computedClassObject () {
                  return { active: this.isActive }
              }
          }
      }
  </script>

小程序端不支持 classObject 和 styleObject 语法。小程序端不支持示例如下：

<template>
	<view>
		<view :class="activeClass">hello uni-app</view>
		<view :style="styleObject">hello uni-app</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				activeClass: {
					'active': true,
					'text-danger': false
				},
				styleObject: {
					color: 'red',
					fontSize: '20px'
				}
			}
		}
	}
</script>
<style>
	.active {
		background-color: #007AFF;
	}
	.text-danger {
		font-size: 60rpx;
		color: #DD524D;
	}
</style>

2：作用域插槽

用于父组件能够访问子组件里的数据，如下：

<!-- 子组件 <current-user>-->
	<template>
		<view>
			<slot :user="user">{{user.lastName}}</slot>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					user:{
						"lastName":"bar",
						"firstName":"foo"
					}
				}
			}
		}
	</script>




<!-- 父组件 -->
    <template>
		<view>
			<current-user>
				<template v-slot:default="slotProps">
					{{ slotProps.user.firstName }}
				</template>
			</current-user>
		</view>
	</template>

子组件将user 作为 <slot> 元素的一个 attribute 绑定上去，绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

注意：例子中v-slot:default="slotProps"，default表示默认插槽，如果是具名插槽要修改对应的名字，如：v-slot:footer="slotProps"，其中slotProps可以自己定义，不是固定的。

3：.sync修饰符（父组件和子组件传值的双向绑定）

父组件通过attribute对子组件进行传值，子组件从props中接收的参数不能直接修改，只能通过emit通知父组件修改该值，如下：

<!-- 父组件 -->
	<template>
		<view>
			<syncA :title.sync="title"></syncA>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					title:"hello vue.js"
				}
			}
		}
	</script>

<!-- 子组件 -->
	<template>
		<view>
			<view @click="changeTitle">{{title}}</view>
		</view>
	</template>
	<script>
		export default {
			props: {
				title: {
					default: "hello"
				},
			},
			methods:{
				changeTitle(){
					//触发一个更新事件
					this.$emit('update:title',"uni-app")
				}
			}
		}
	</script>

注意：普通的动态attribute绑定不需要加.sync修饰符，子组件通知父组件也不需要 update:来修饰通知父组件修改attribute。

4：vuex mapState辅助函数获取

vuex就不过多介绍，当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<view>用户名：{{username}}</view>
		<view>年龄：{{age}}</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {}
		},
		computed: mapState({
		    // 从state中拿到数据 箭头函数可使代码更简练
		    username: state => state.username,
			age: state => state.age,
		}) 
	}
</script>

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。如下：

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<view>用户名：{{username}}</view>
		<view>年龄：{{age}}</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {}
		},
		computed: mapState([
			'username',//映射 this.username 为 store.state.username
			'age',
		])
	}
</script>

注意：为了能够使用 this 获取组件自己的data数据，必须使用常规函数。如下：

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<view>用户名：{{username}}</view>
		<view>年龄：{{age}}</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {
				firstName:"Li"
			}
		},	
		computed: {
			...mapState({
				username: function (state) {
				    return this.firstName + ' ' +  state.username 
				},
				age: state => state.age,
			})
		},
	}
</script>

使用对象展开运算符
mapState 函数返回的是一个对象。使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。极大地简化写法：

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<view>用户名：{{username}}</view>
		<view>年龄：{{age}}</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {}
		},
		computed: {
			//使用对象展开运算符将此对象混入到外部对象中
			...mapState({
				username: state => state.username,
				age: state => state.age,
			})
		},
	}
</script>