子组件传值父组件
子组件调用父组件的方法
-
在父组件中给引用的子组件注册一个事件(这个事件的名字是自定义的)
-
子组件可以触发这个事件$emit('事件名字')
<template id="father">
<div>
父组件
<son @formfather='fromson'></son>
子组件{{msg}}
</div>
</template>
methods: {
fromson(data) {
console.log(data);
this.msg = data
}
}
子组件给父组件传递数据
-
$emit方法第二个参数可以定义子组件给父组件传递的内容
-
在父组件中怎么拿到这内容
- 2.1 父组件这个方法没有自定参数,在父组件的方法直接加这个参数就可以拿到
- 2.2 父组件有自定义参数,可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。
<template id="son">
<div>
子组件
<button @click="tofather">点击传值</button>
</div>
</template>
methods: {
tofather() {
console.log(111111);
// 传值
this.$emit("formfather", this.num)
}
}
ref的使用
-
获取dom节点
-
给dom节点记上ref属性。
-
加上ref之后,在$refs属性中多了这个元素的引用。
-
通过vue实例的$refs属性拿到这个dom元素。
-
获取组件
-
给组件记上ref属性。
-
加上ref之后,在$refs属性中多了这个组件的引用。
-
通过vue实例的$refs属性拿到这个组件的引用,之后可以通过这个引用调用子组件的方法,或者获取子组件的数据。
<template id="father">
<div>
父组件
<div ref="father">炸鲜奶</div>
<son ref="son"></son>
</div>
</template>
Vue.component('father', {
template: '#father',
mounted() {
console.log(this.$refs)
console.log(this.$refs.son.num1)
// 可以拿到son的方法
console.log(this.$refs.son.sum(1, 3))
console.log(this.$refs.father)
// 可以操纵元素
this.$refs.father.style.color = "red"
}
})
Vue中路由的使用
什么是路由
-
后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
-
前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;
-
在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)
路由的基本使用
1、引入
2、创建路由
3 、创建组件和路由映射关系
4、创建的路由需要和vue实例关联一下
5、路由到的组件显示在哪个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 1、引入 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<body>
<div id="app">
<!-- 5、路由到的组件显示在哪个位置 -->
<router-view></router-view>
</div>
</body>
<template id="father">
<div>
我是爸爸
</div>
</template>
<template id="son">
<div>
我是儿子
</div>
</template>
</html>
<script>
let father = Vue.component('father', {
template: '#father'
})
// 可以省略Vue.component
let son = ('son', {
template: '#son'
})
// 2、创建路由
const router = new VueRouter({
// 3 .创建组件和路由映射关系
routes: [
{
path: '/',
component: father,
},
{
path: '/son',
component: son
}
]
})
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {},
methods: {},
// 4创建的路由需要和vue实例关联一下
router,
});
</script>
路由的跳转
-
router-link标签可以设置to属性
-
默认是a标签,可以通过tag设置包裹标签
<template id="father">
<div>
我是爸爸
<router-link to="/son">去儿子家</router-link>
<router-link to="/son" tag="h2">改变孩子的标签</router-link>
</div>
</template>
<template id="son">
<div>
我是儿子
<router-link to="/father">去老爸家</router-link>
</div>
</template>
路由重定向
redirect可以进行路由的重定向
{
path: '/',
redirect: '/son'
},
选中路由高亮
1.使用默认的样式 直接设置router-link-active
2.自定义样式 配置 linkActiveClass:'自定义的类名'
路由传参
1、定义参数
通过query的方式在url后加?参数名=参数的值
获取参数:$route.query.参数名
<template id="son">
<div>
我是儿子
<router-link to="/father?courseid=103">去老爸家</router-link>
<!-- 路由传参 -->
<router-link :to="{path:'/father',query:{course:103}}">去老爸家2</router-link>
<router-link :to="{path:'/father',query:{course:courseid}}">去老爸家3</router-link>
<router-link to="/son">去儿子家</router-link>
</div>
</template>
2、使用浏览器参数的方式传递参数
设置路由的时候/路由地址/:参数名
获取参数$route.params.参数名
<template id="father">
<div>
我是爸爸
<router-link to="/son">去儿子家</router-link>
<router-link to="/father">去老爸家</router-link>
<!-- <router-link to="/son" tag="h2">改变孩子的标签</router-link> -->
<router-link :to="{name:'son',params:{id:777}}"> 去儿子家2</router-link>
<router-link :to="{name:'son',params:{id:fatherdata1,nama:'lisi'}}"> 去儿子家3</router-link>
</div>
</template>
3、js跳转
去爸爸家1
methods: {
tofather() {
// this.$router.push({ name: "daughter", params: { like: "茶百道" } });
this.$router.push({ path: "/father", qurey: { father: 111 } });
},
},