| 基础-组件-组件通信的几种情况 |
| 组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信 组件之间的通信根据关系的可以分为： |
| 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
主页
热点
关于我们
基础-路由-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有多种赋值方法 |
（注意:name值是字符串）
（注意：必须得加上/ 不然容易错乱）
（注意获取参数route 不要写成router）
基础-路由-VUE-ROUTER-重定向 |
| 场景: 当希望某个页面被强制中转时 可采用redirect 进行路由重定向设置 |
path: "/bj",
redirect: "/sh", // 强制跳转上海 component: {
template: `体育
`
}
基础-路由-VUE-ROUTER-编程式导航 |
| 场景: 点击的时候路由实现跳转 |
methods: {
goPage() { // 跳转到新闻页面
this.$router.push({
path: "/news"
});
}}
| 基础-路由的激活样式 |
| 当前路由在导航中是拥有激活class样式的 |
| 审查导航元素,可以发现 激活样式 |
北京
设置激活class样式即可
