Vue 组件+es6箭头函数+路由

最新推荐文章于 2024-04-29 16:43:07 发布

奕宸Long

最新推荐文章于 2024-04-29 16:43:07 发布

阅读量315

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54435916/article/details/127796701

版权

一、组件

1、让网页或局部页实现复用，包括js（vue）功能

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展

2、基本语法（创建js文件）

//页面模板
var temp = `<template id="test">
    <div>
       页面内容
    </div>
            </template>`
//创建一个组件
Vue.component("test",{
    template: temp,  //el:'#app'
    data: function(){
        return {  //model
        }
},
methods:{

},
 //自定义属性,获取属性值---数组
props:['属性名1','属性名2']
})

3、例如登录功能

数据传递问题：

（1）当登陆成功：从当前页把数据传递给组件----用属性（父组件通过属性向子组件传参）

（2）组件执行完结果之后，再把数据回传回来（子组件通过按钮把数据回传给父组件）

使用组件：

（1）在父组件中引入子组件，导入js文件，并使用test标签

index.html（04vue）

<div id="app">
    <h2>组件</h2>
    <test></test>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>

（2）用自定义属性从父组件传递给子组件

父组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<h2>组件</h2>
            //利用子组件自定义属性传参
			<test msg="输入姓名"></test>
		</div>
		<script type="text/javascript" src="js/vue.min.js" charset="UTF-8"></script>
        //引入子组件.js
		<script type="text/javascript" src="js/test1.js" charset="UTF-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					
				}
			})
		</script>
	</body>
</html>

子组件：

//创建页面模板
var temp = `<template id="test">
				<div>
					{{msg}}<input v-model="name" />
					<button type="button" @click='testres()'>测试</button>
				</div>
			</template>`
//创建组件
Vue.component("test",{
	template:temp,
	data:function(){
		return{
			//属性写name
			name: ''
		}
	},
	methods:{
		
	},
	//自定义属性
	props:['msg']
})

（3）从子组件回传数据给父组件

基于事件监听---自定义事件(自定义命名)

父组件自定义事件及方法

父组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<h2>组件</h2>
			<!-- 父组件自定义事件 @myevent=""相当于一个接收器 -->
			<test msg="输入姓名" @myevent="acceptres"></test>
			<hr >
			<!-- 子组件传过来的数据显示的位置 -->
			<span>{{info}}</span>
		</div>
		<script type="text/javascript" src="js/vue.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/test1.js" charset="UTF-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					info:''
				},
				methods:{
					//接收器
					acceptres(res){
						this.info=res
					}
				}
			})
		</script>
	</body>
</html>

子组件：

//创建页面模板
var temp = `<template id="test">
				<div>
					{{msg}}<input v-model="name" />				
					<button type="button" @click='testres()'>测试</button>
				</div>
			</template>`
//创建组件
Vue.component("test",{
	template:temp,
	data:function(){
		return{
			//属性写name
			name: ''
		}
	},
	methods:{
		//给父组件回传消息  "父组件自定义的事件名"  "回传信息"
		testres(){
			this.$emit('myevent',this.name)
		}
	},
	//自定义属性
	props:['msg']
})

二、es6箭头函数

顶替了匿名函数，方便使用this

function(){ //使用this是指向当前这个类，就不能指向当前的vue了，所以使用vm参数

//代码

}

箭头函数--表达式

()=>{}

若只有一个参数，可以省略小括号

若只有一行代码，可以省略大括号和return

三、路由

1、路由技术的实现

路由---组件和路径的结合---相当于自定义的超链接

1.1创建route---路由（实现整个项目的导航）---对应一个路径--->组件

{path:'路径', component: 组件（完成页面的样式和功能）}

1.2创建路由数组routes----配置很多的路由

[{路由1},{路由2},{路由3}]

1.3创建router---路由器

<router-view>----加载路由[组件]的容器

<div id="app">
<a href="#/login">登录</a><a href="#/register">注册</a>
<router-view></router-view>
</div>
router-link---方式
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

1.4 路由传参

2.1query方式

to="/login?uid=101&upwd=101"

$route.query.xxx

2.2params方式

rest风格

{path:'/register/:uid/:upwd', component: register}

to="/login/101/admin"

$route.params.xxx

创建路由的过程：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to="/reg?aid=101">注册</router-link>
			<router-link to="/log/a107">登录</router-link>
			<!-- 连接会加载到这里 -->
			<router-view></router-view>
		</div>
		
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//创建组件
			/*{{$route.query.aid}}取出请求路径 数据传参（参数获取机制 */
			var reg = {template:`<h2>注册{{$route.query.aid}}<h2/>`}
			var log ={template:`<h2>登录{{$route.params.uid}}<h2/>`}
			//创建路由数组
			var routes= [
				{path:'/reg',component:reg}, //路由
				{path:'/log/:uid',component:log}
			]
			//创建路由器
			var router = new VueRouter({
				routes
			})
			//创建VUE
			var vm = new Vue({
				el: '#app',
				router
			})
		</script>
	</body>
</html>

奕宸Long

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 组件+es6箭头函数+路由

在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。（1）当登陆成功：从当前页把数据传递给组件----用属性（父组件通过属性向子组件传参）（2）组件执行完结果之后，再把数据回传回来（子组件通过按钮把数据回传给父组件）（1）在父组件中引入子组件，导入js文件，并使用test标签。<router-view>----加载路由[组件]的容器。路由---组件和路径的结合---相当于自定义的超链接。基于事件监听---自定义事件(自定义命名)---对应一个路径--->组件。
复制链接

扫一扫