父组件向子组件传参

接受父组件传值

设置props属性就可以接受父组件传值

示例：

// html部分
<son :parent-msg='msg' :list='list'></son>
<template id='myComTemp'><div><button @click='changeMsg'>修改parentMsg</button><h1>你好{{parentMsg}}</h1><ul><li v-for='item in list'>{{item.name}}</li></ul></div>
</template>// 组件定义部分
Vue.component("myConTemp",{template:"#myConTemp",props:['parentMsg','list']
})
var vm = new Vue({el: '#app',data:{},methods:{},}
})

设置传递类型

props: {// 规定了父组件只能传对象类型prop1:Object// 可以设置多个类型，可以传Number也可以传StringparentMsg: [Number, String],list: {// 设置类型type: Array,// [Array,String]// 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的default: function () {return [{name: '这个一个默认的名字'}]}},
}

注意事项：

props参数是只读的，不能修改。

传参的时候，如果驼峰命名要转成-连接

声明参数的时候如果是引用类型，默认值要用函数设置

子组件向父组件传递信息

在子组件中定义事件

通过$emit去触发事件

this.$emit("事件名字",事件源数据)这行代码一般写在定义组件的methods中

在引用子组件时可以直接在标签中绑定事件，事件名必须和methods中的函数名一致

<son @事件名="处理函数"></son>methods:{处理函数(){//返回的数据
}

属性的覆盖

在引用子组件的时候，可以在标签上设置一些属性，如id、name、class、style等

这些属性会直接设置到组件的跟标签上
如果跟标签上有重复的属性引用的时候，设置的属性会覆盖之前的属性
对于class和style来说，不会进行覆盖，而是进行合并操作
如果想在组件中获取到父组件传递过来的属性的话，可以通过this.$attrs.属性名来获取。（这里不会获取到在props上设置的属性）

路由的创建

1、引入vue-router文件

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2、创建实例

const router=new VueRouter({})

3、创建组件和路由的映射关系

//在实例里面创建映射关系routes:[{path:"url的地址"，component: Vue.compoment("组件名"，{template:"html的标签以及view展示的内容"})
}]

4、创建联系，挂载在Vue实例上

在Vue实例上添加

router

5、预留展示区域

<router-view></router-view>

路由的跳转

1、router-link标签可以设置to属性

2、默认是a标签，可以通过tag设置包裹标签

   <router-link to="/son"> 去子组件</router-link><router-link to="/son" tag="div"> 去子组件tag改变标签</router-link>//用tag改变标签a链接属性，tag属性值就是你想改成什么标签

路由重定向

redurect可以进行路由的重定向

 const router = new VueRouter({routes: [{path: "/index",component: father,},//重定向，输入path路径，一直将页面跳转到redirect的页面{ path: "/", redirect: "/index" },{path: "/son",component: son,},],});

路由高亮

使用默认的样式

直接设置router-link-active

自定义样式

配置 linkActiveClass:'自定义的类名'

定义参数

通过query的方式在url后加？参数名=参数值

获取参数：$route.query.参数名

示例：

<!DOCTYPE html>
<html><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></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 1、引入vue-router --><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><div id='app'><router-view></router-view></div><template id="son"><div>子组件<router-link to="/son">去其他组件</router-link><router-link to="/son?courseid=103&name=李四" tag="div">去其他组件</router-link>//query传参<router-link :to="{path:'/son',query:{course:103,name:'张三'}}">去其他组件2</router-link><router-link :to="{path:'/son',query:{course:courseid,name:name}}">去其他组件3</router-link></div></template><template id="hah"><div>hahahha</div></template><script>let son = Vue.component("son", {template: "#son",data() {return {courseid: 104,name: '李四'};},})let hah = Vue.component("hah", {template: "<h2>hahah</h2>"})// 创建路由实例const router = new VueRouter({// 创建组件和路由的映射关系routes: [{path: "/",component: son,}, {path: "/son",component: hah},// 重定向，输入path路径，一直跳转到redirect的页面{ path: "/index", redirect: "/son" }],});const vm = new Vue({el: '#app',data: {},methods: {},// 创建联系router,})</script>
</body></html>

使用浏览器参数的方式传递参数

1、设置路由的时候/l路由地址/:参数名

2、获取参数$route.params.参数名

示例：

<!DOCTYPE html>
<html><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></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 1、引入vue-router --><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><div id='app'><router-view></router-view></div><template id="son"><div>子组件<router-link to="/son">去其他组件</router-link><router-link to="/son?courseid=103&name=李四" tag="div">去其他组件</router-link><router-link :to="{name:'son',params:{id:777,nama:'张三'}}">去其他组件1</router-link><router-link :to="{name:'son',params:{id:sonid,nama:'zhangsan'}}">去其他组件2</router-link></div></template><template id="hah"><div><!-- <router-link :to="{name:'son',params:{id:103,name:'张三'}}">去其他组件2</router-link> -->hahahha<router-link to="/"> 去子组件</router-link></div></template><script>let son = Vue.component("son", {template: "#son",data() {return {sonid: 888,};},})let hah = Vue.component("hah", {template: "#hah",created() {console.log(this.$route);}})// 创建路由实例const router = new VueRouter({// 创建组件和路由的映射关系routes: [{path: "/",component: son,}, {path: "/son/:id/:name",component: hah,name: "son"},// 重定向，输入path路径，一直跳转到redirect的页面{ path: "/index", redirect: "/son" },],});const vm = new Vue({el: '#app',data: {},methods: {},// 创建联系router,})</script>
</body></html>

vue组件扩展及路由的使用-day05相关推荐

【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
vue路由跳转子组件_vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
Vue组件生命周期钩子和Vue-Router路由钩子的执行顺序
Vue组件生命周期钩子的执行顺序如下图所示链接:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6% ...
active vue 路由样式保持_Vue 解决父组件跳转子路由后当前导航active样式消失问题...
举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDeta ...
Vue组件继承实践：扩展分隔条（MySplitter）组件
引子填坑之路如何实现已有Vue组件的继承扩展? 怎么才能调用基类组件的方法呢? 计算属性究竟是怎么判断要不要重算的? 如何让计算属性手动强制重算? 如何在重载 render 方法中,往原有的虚拟节 ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...
vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用, 全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能 1.什么是组件?---从UI的角度把页面 ...

vue组件扩展及路由的使用-day05