| 基础-组件-组件通信的几种情况 |
| 组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信 组件之间的通信根据关系的可以分为： |
| 1. 父子组件通信 |
| 父组件到子组件 |
| 子组件到父组件 |
| 2.兄弟组件通信 |
//调用组件
//子组件Vue.component("child-a", { template: ` 我是子组件 {{count}}是自己的data中的数据count {{msg}}是来源于外部组件的数据
`, data() { return {count: 100 } }, props: ["msg"]})//父组件（根组件）new Vue({ el: '#app' data: { msgParent: "我是父组件"}})
| 基础-组件-父子组件传值-PROPS属性 |
| 父子组件的传值有多种方法，兄弟组件的通信也有自己的写法 |
| 1.子组件的props属性值是一个数组 |
| 2.数组中的值 绑定为子组件上的属性 用来接受父组件的传值 |
3.在子组件的template中就可以使用 绑定的属性（msg） 拿到父组件传递的值 |
基础-路由-JS 实现路由 |
| 通过上一个小节内容可以得出 采用 hash值改变 的特性来进行前端路由切换 |
| 路径： |
1. 实现导航结构（'#/aaa'） |
2.onhashchange事件监听hash值的改变 |
| 3.获取hash值 根据值的不同 改变视图内容 |
基础-路由-VUE-ROUTER-文档 |
Vue-Router 是 Vue.js 官方的路由管理器 |
它和 Vue.js的核心深度集成，让构建单页面应用变得简单 |
实现根据不同的请求地址 而 显示不同的内容 |
如果要使用 vue开发项目,前端路由功能 必须使用vue-router来实现 |
用法：1.CDN 2.本地文件 3.npm |
注意：本地文件引入vue-router ，一定要先引入vue.js，再引入vue-router |
基础-路由-VUE-ROUTER的基本用法 |
1. 导入vue和vue-router |
| 2. 设置HTML中的内容 |
| 3. 实例化路由对象,配置路由规则 |
| 4. 创建路由对应的组件 |
5. 把router实例挂载到vue实例上 |
Document 主页 热点 关于我们
// 模板内容 let Home = { template: `主页
` } let Top = { template: `热点
` } let Abouts = { template: `关于我们
` } // 匹配规则 let router = new VueRouter({ routes: [{ path: '/home', component: Home }, { path: '/top', component: Top }, { path: '/abouts', component: Abouts }] }) let vm = new Vue({ el: '#app', data: {}, router })
基础-路由-VUE-ROUTER-动态路由 |
点击 列表页 跳转到 详情页 时,跳转的链接需要携带参数,会导致 path 不 |
| 当path不同却需要对应同一个组件时,需要用到动态路由这一概念 |
步骤：
1.标签上传入不同的值
小米电视 华为电视
2.路由规则中 尾部 添加动态参数 id
{ path: '/item/:id', component: Items }
3.在组件内部可以使用$route.params 获取当前路由对象的动态参数
let Items = { template: '我是商品详情页 {{ $route.params.id }}
', mounted： { console.log(this.$route.params.id); } }
基础-路由-VUE-ROUTER-TO 属性赋值 |
| to有多种赋值方法 |
<!-- aaa --> <!-- bbb --> （注意:name值是字符串） <!-- ccc --> （注意：必须得加上/ 不然容易错乱） <!-- ddd --> （注意获取参数route 不要写成router） <!--体育 -->
基础-路由-VUE-ROUTER-重定向 |
| 场景: 当希望某个页面被强制中转时 可采用redirect 进行路由重定向设置 |
path: "/bj", redirect: "/sh", // 强制跳转上海 component: { template: `体育
`}
基础-路由-VUE-ROUTER-编程式导航 |
| 场景: 点击的时候路由实现跳转 |
methods: { goPage() { // 跳转到新闻页面 this.$router.push({path: "/news" });}}
| 基础-路由的激活样式 |
| 当前路由在导航中是拥有激活class样式的 |
| 审查导航元素,可以发现 激活样式 |
北京
设置激活class样式即可
