自学uni-app (4)页面、事件和组件

本文详细介绍了uni-app中页面的创建与显示、事件的注册与参数传递,以及组件的使用,包括共有属性、添加、导入、注册、参数传递等。重点讲解了父子组件间的通信方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、页面

1. 创建新页面

  1. 在pages文件夹下直接创建.vue 的新页面文件
    文件目录如下
┌─components          
│         
├─pages                 页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
└─other.vue 		创建的新页面
├─static               
├─main.js              
├─App.vue             
├─manifest.json     
└─pages.json
  1. 把新的页面文件放在pages下的一个文件夹内
    文件目录如下
┌─components          
│         
├─pages                 页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─other
│     └─other.vue 		创建的新页面
├─static               
├─main.js              
├─App.vue             
├─manifest.json     
└─pages.json

2. 显示新页面

如果想要显示新页面,我们需要在pages.json中进行页面的注册
注:

  1. pages是一个数组
  2. pages中第一项表示应用启动页(在没设置页面跳转之前,我们都把新页面放在第一项,这样才能在应用启动时显示新页面)

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/other",
		    "style" : {
				"navigationBarTitleText": "新页面"
				
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			} 
		}
	    
    ]

二、事件

1. 注册事件

在页面文件的中template标签内注册事件 @click="handleClick"

样例:

<template>
	<view class="content">
		<view @click="handleClick"> 点我试试</view>
	</view>
</template>

2. 定义事件监听回调函数

methods中定义事件监听回调函数
在页面文件的script标签的导出模块的method中加入该事件监听的回调函数handleClick()
样例:

<script>
	export default {
		methods: {
			handleClick(){
				console.log("你好帅(你好美)!!!");
			}
		}
	}
</script>

3. 事件的传参

我们可以通过事件来传递参数

3.1 简单传参

通过给事件函数加入实参
回调函数中通过event对象来调用

样例:

<template>
	<view class="content">
		<view @click="handleClick(1)"> 点我获取要传递的参数</view>
	</view>
</template>
<script>
	export default {
		methods: {
				handleClick(event){
					console.log(event);
			}
		}
	}
</script>

event为注册函数中传递的参数,可以为数字类型、字符串类型甚至是对象类型
我们可以通过event对象来调用它的属性 ,调用方法: event.propertypropertyevent对象所拥有的其中一个属性
如果有一个属性为transfernum ,可以通过event.transfernum 来调用

event可以简写成e效果是一样的
如下

		handleClick(e){
				console.log(e);
		}

3.2 传入标签内自定义参数

<template>
	<view class="content">
		<view data-pro="11" @click="handleClick(1,$event)"> 点击我获取标签中自定义的数据的值</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleClick(index,event){
				console.log(index);
				console.log(event);
				console.log(event.currentTarget.dataset.pro);
		}
	}
	}
</script>

event 返回值是一个对象
如下

event对象
我们通过event.currentTarget.dataset.pro 来获取event对象的currentTarget属性下的pro
pro属于数据集 dataset ,因为我们定义的是data-pro="11"data就相当于是一个前缀,pro作为实际放在数据集中的数据名

当然自定义的数据值也可以是子组件的值,或者是从页面用户输入的值,这些在后面学习了组件获取参数,将获取到的参数放到自定义数据中就可以了

三、组件

组件是视图层的基本组成单元。
一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。
内容写在开始标签和结束标签之内。
页面上内容的变化是通过挂载和销毁组件来完成。
注:
根节点为 <template>,这个 <template> 下只能且必须有一个根<view>组件。这是vue单文件组件规范。

1. 组件的共有属性

属性名类型描述注解
idString组件的唯一标识保持整个页面唯一
classString组件的样式类在对应的 css 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否隐藏所有组件默认是显示的
data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数(*表示自定义的内容)
@*EventHandler组件的事件用于事件绑定(*表示自定义的内容)

2. 添加组件

component文件夹下创建一个组件文件phoneComp


<template>
	<view>
		<text>这是一个组件</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

3. 导入组件

index.vue中的script标签中导入创建的组件文件

<script>
	import textCom from "@/components/phoneComp";
	
</script>

4. 注册组件

将导入的组件注册到页面中

<script>
	import phoneCompfrom "@/components/phoneComp";
	export default {
		components:{
			//注册组件   name:value  当name=value时可以简写成  name  , 全写为 phoneComp:phoneComp
			phoneComp
		}
</script>

5. 使用注册的组件

通过标签的形式来使用组件

<template>
	<view>
		<phoneComp></phoneComp> 
	</view>
</template>

注:
vue推荐用phone-comp的格式来表示组件

但是这个必须是在注册组件时将模块名用驼峰命名法来表示,才能使用

如:注册时使用phoneComp 作为注册时的组件名,那么你可以使用<phone-comp></phone-comp>来使用组件

如果不使用驼峰命名法,如:phonecomp作为注册时的组件名,那么你不可以使用<phone-comp></phone-comp>来使用组件

实际是使用-来代替 驼峰

phoneCompphone-comp

组件的源文件的命名方式不会影响导入模块后的命名

6. 组件传递参数

父向子传递参数通过属性的方式

子向父传递参数通过触发事件的方式

使用全局数据传递参数

  1. 通过挂载vue的原型上
  2. 同通过globalData的方式

6.1 父向子传递数据

父页面向子组件ul-com 通过属性名list 传递了一个数组数据

子组件通过props 进行接收数据

父组件


<transfer-par :list="[1,2,3,4]"></transfer-par>

transfer-par 为导入的组件(模块)的自定义组件名

import transferPar from '@/components/transferPar.vue';

当然我们也可以在父组件上用 导出模块的属性值来代替直接赋值

例如:list="filterList" 这里filterList为在data中定义的一个数组

子组件

<template>
	<view :list="list">
		{{list[2]}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},props:{
			list:Array
		}
	}
</script>

<style>

</style>

6.2 子向父传递数据

子组件


<template>
	<view >
		<text @click="handleClick"> 点击获取子组件的数据</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sr:"来自子组件的数据"
			};
		},
		methods:{
			handleClick(){
				console.log("点击了子组件");
				this.$emit("textChange",this.sr);
			}
		}
	}
</script>

<style>

</style>

父组件


<template>
	<view>
		<!-- <view >{{sr}} </view> -->
		<child-transfer
			@textChange="handleTextChange">
    	</child-transfer>
    </view>
</template>

<script>
	import childTransfer from '@/components/childTransfer.vue';
	export default {
		data() {
			return {
				sr:""
			}
		},
		methods: {
			handleTextChange(e){
				console.log("点击了");
				// this.sr=e;
			}
		},
		components: {
			childTransfer
		}
	}
</script>

<style>

</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值