uniapp 小程序学习（二）

2025/6/21 19:47:10 来源：https://blog.csdn.net/qq_41739657/article/details/148536928 浏览: 次关键词：uniapp 小程序学习（二）

与传统H5不一样的路由跳转

在这里插入图片描述

在这里插入图片描述

这么写可在tabar 页面跳转可携带参数

与vue2.0 不一样的组件写法

vue2.0 创建局部组件要三步走既

	<!-- 在index.vue引入 uni-badge 组件--><template><view><uni-badge text="1"></uni-badge><!-- 3.使用组件 --></view></template><script>import uniBadge from '@/components/uni-badge/uni-badge.vue';//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）export default {components:{uniBadge }//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步） }</script>

uniapp 利用easycom简化步骤
但是对文件格式有要求
在这里插入图片描述

创建俩局部组件

在这里插入图片描述

sync修饰符

	<!-- 父组件 --><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>