自学uni-app （4）页面、事件和组件

一、页面

1. 创建新页面

1. 在pages文件夹下直接创建.vue 的新页面文件
   文件目录如下

┌─components          
│         
├─pages                 页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
└─other.vue 		创建的新页面
├─static               
├─main.js              
├─App.vue             
├─manifest.json     
└─pages.json

2. 把新的页面文件放在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.property ，property为event对象所拥有的其中一个属性
如果有一个属性为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.currentTarget.dataset.pro 来获取event对象的currentTarget属性下的pro
pro属于数据集 dataset ，因为我们定义的是data-pro="11" ，data就相当于是一个前缀，pro作为实际放在数据集中的数据名

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

三、组件

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

1. 组件的共有属性

属性名	类型	描述	注解
id	String	组件的唯一标识	保持整个页面唯一
class	String	组件的样式类	在对应的 css 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否隐藏	所有组件默认是显示的
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>来使用组件

实际是使用-来代替 驼峰

phoneComp→phone-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>