Vueday04-CSDN博客

本文链接：https://blog.csdn.net/big_lu/article/details/84641232

正课:

组件间通信——重点&难点
SPA应用
Vue-router组件
组件间通信——重点&难点:
3大类:
父->子: 属性下行:
子: 定义props属性，其中包含接收父组件数据的模型变量
props属性：可被外部访问，并赋值的特殊模型数据
1. 在组件内的用法和data中的模型变量完全一样！
2. 可被其他组件发现并赋值。
  var 子组件={
  … …
  props:[ “模型变量”, … ]
  }
父组件的template中:
<子组件 :子组件props属性变量=“父组件模型变量”
结果: 父组件将自己的模型变量赋值给子组件内的props属性变量。
子->父: 事件上行
父组件中:

<子组件 @自定义事件名=“处理函数”
var 父组件={
props/data: 模型变量
methods:{
处理函数(参数){
根据参数修改this.模型变量
}
}
}
强调: @自定义事件名=“处理函数”，在定义处理函数时不要加(参数)。因为参数会被认为是绑定模型变量，会报错。
子组件任意位置，都可触发父组件中绑定的自定义事件
this.$emit(“自定义事件名”,参数值)
会触发父组件template中，提前绑定的@自定义事件，并将参数传递给父组件中的处理函数
兄弟间: 采用先给父，再由父绑定到另一个子
强烈建议，今后，只要多个子组件共用一个数据时，都应将数据定义在父组件上。
SPA应用：
SPA: Single Page Application 单页面应用
什么是: 整个应用程序只有一个完整的HTML文件
所谓的"页面"，其实只是不同组件片段而已
在浏览器时，按需加载组件片段内容，替换HTML文件中指定位置。
多页面应用 vs 单页面应用
请求次数:
多页面应用，会造成反复请求
单页面应用，只请求一次，就拿到所有内容
页面跳转的本质:
多页面应用，删除整棵DOM树重建
单页面应用，只替换DOM树中局部节点对象即可
共用资源:
多页面应用，多个页面共用的资源，也需要反复请求下载
单页面应用，只在首次加载HTML文件时，请求下载一次
页面切换动画:
多页面应用，不可能实现页面切换动画
单页面应用，很容易实现页面切换动画
问题: 首屏加载慢！
解决: 将来Vue项目中可设置“懒加载”——按需加载。

单页面应用实现的原理：

定义多个template
定义一个唯一的完整的HTML文件
HTML中要有一个特殊的元素占位，表示将来要被不同template替换的位置。
定义路由字典:
路由: 一个请求地址和一个组件名的对应关系
#index, tplIndex
#products, tplProducts
路由字典：包含一组路由键值对儿的集合
var routes=[
{#index, tplIndex}
{#products, tplProducts}
]
根据当前url中相对路径或请求参数的不同，用不同的template代替占位符的位置。
1. 获得相对路径或请求参数
2. 遍历路由列表，找到对应的template，并读取其中内容
3. 用template内容代替占位符的位置
路由组件: Vue-router
Vue-router: 是vue中专门实现单页面应用的组件
何时: 只要用vue实现单页面应用时，都用vue-router
如何:
Vue核心功能中不包含Vue-router，需要下载后才能使用
下载并引入vue-router.js

将页面区域都定义在template中

所有template，都要创建对应的组件对象
共用的template，创建全局组件
替换router-view的组件，创建局部子组件
建立路由字典:
var routes=[
{path:"/",component: 默认组件},
{path:"/路径名", component: 组件对象},
… …,
{path:"/*",component: NotFound}
]
仅是保存对应关系的数组，即不会解析地址，也不会替换router-view
创建路由器对象，加载路由字典:
var router=new VueRouter({ routes })
创建vue示例，并载入路由器对象
new Vue({ … router …})

如何路由跳转:

在HTML中写死:
文本
原理: router-link用法和a几乎安全一样，因为router-link运行时会被自动翻译为a
在Vue中用程序:
this.$router.push("/相对路径")
如何路由传参:
在接收参数的组件中: props:[ “参数变量” ]
配置路由地址：
{path:"/相对路径/:变量名",component: 组件对象,props:true}
跳转时: 地址: /相对路径/参数值
强调: 不加:
获得当前路由地址对象: this. $r o u t e t h i s .$ router vs this.$route
$router代表路由器，专门执行跳转任务
$r o u t e 封装当前路径信息的对象 t h i s .$ route.path 当前所在路径

嵌套路由:
如果一个router-view内的部分内容，也需要根据二级路径的不同，动态替换时，就用嵌套路由:
如何:

定义子组件模板，封装子组件对象
在父组件中添加
在路由字典中:
{path:"/上级路径",component:父组件对象,children:[
{path:"/上级路径/二级路径",component:子组件对象},
… …
]}
跳转: /上级路径/二级路径
其中: /上级路径决定根组件中router-view的内容
/二级路径决定父组件中router-view的内容