vue_day04

关于组件定义:
如果Vue.component()在注册组件的时候,组件名称和组件模板对象变量名一致,那么可以简写为

image.png
关于父向子组件传值(属性):
默认情况下,子组件中无法访问父组件中的data上的数据和methods中的方法.
可以通过数据绑定的形式,把父组件的数据传递给子组件,需要在子组件使用的时候通过:属性名 = "父组件中的数据名"进行传递.
image.png
子组件中props和data的区别:
在子组件内部,属性必须在props这个列表中声明,否则 子组件无法使用,props列表中的属性都是父组件传递过来的.并且props中的数据都是只读的,无法重新赋值.Vue会报红色警告
而子组件中data中的数据,并不是父组件传递过来的,而是子组件自身私有的,比如说 ajax请求回来的数据都可以放在data身上.并且data上的数据都是可读可写的.
image.png
关于父向子组件传值(方法):
通过事件绑定给子组件传递方法引用,在子组件中通过this.$emit('func')进行方法调用,传递参数可以通过this.$emit('func',param1,param2)进行调用
image.png
image.png
关于子向父组件传递数据
原理:实际上是父组件首先通过事件绑定机制,把事件传递给子组件,然后子组件进行调用的时候把自己的data中的数据传递给父组件的方法,然后在父组件的方法内,可以用过this.params = data,进行存储.这样可以实现子组件向父组件传递数据.

Vue获取指定DOM对象:
使用this.$refs.引用名,可以在DOM元素上通过ref属性指定引用名称,也可以引用组件

image.png image.png

简便的方法进行父子组件传值:

父组件向子组件传值:this.$refs.'子组件的ref属性'
子组件向父组件传值:this.$parent
通过这种方式,都可以直接获取到对应组件的DOM节点对象.

非父子组件间的通信---通过广播的形式进行通信

1.创建一个js文件,然后引入vue,实例化通过export default暴露出去
2.在要广播的地方引入刚才的实例,通过VueEvent.on('名称')来接收数据.

关于路由:
后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
前端路由:对于单页面应用程序来说,主要是通过URL中的hash(也就是#号)来实现不同页面之间的切换,同时,hash也有一个特点,HTTP请求中不会包含hash相关的内容,所有,单页面程序中的页面跳转主要是用hash来实现的(其实就是html页面中的锚点,通过a标签进行跳转)

vue-route模块的使用:

首先通过<script>标签的src属性引入vue-route模块,当引入完成后,在window全局对象中,就有了VueRoute这个构造函数.
通过new关键字在创建路由对象的时候,可以为构造函数传递一个配置对象.

image.png
注意:通过Vue.component()注册组件后,只能用于<组件名称>标签这种方式
用来和vm实例建立关联关系
image.png
在页面上必须使用vue-router提供的标签,充当路由匹配成功后展示的容器.
image.png
如果用<a>标签来进行切换,那么href属性跳转的路径必须用#开头,用于标记这个不是真实的url路径,而是hash,要进行前端路由匹配.

路由的执行过程:
当点击超链接后,首先会改变地址栏的url,然后会触发路由的监听事件,路由监听到地址改变,会进行路由规则匹配,匹配成功后,会展示对应的组件,把对应的组件展示到<router-view>这个容器中去.

<router-link>标签:
可以代替<a>标签,不用再路径前加#号用来标记是前端路由.
渲染到页面后,展示的其实是<a>标签,这个标签可以认为是个语法糖.

image.png

前端路由中的重定向
通过在路由规则中加入redirect属性,来完成切换组件展示

image.png
选中路由高亮:
可以通过class进行样式设置
image.png
image.png

可以通过构造函数传递参数,来自定义高亮显示的样式,或者可以指定Bootstrap中的样式

image.png
路由规则中定义参数:
组件也有生命周期函数,可以在created中获取参数
第一种方式:通过GET方式的queryString来传参,通过this.$route.query可以获取query这个对象
image.png
第二种方式:通过占位符来获取路径参数
参数保存在params属性中,此时,请求的url必须和路由规则中的路径参数个数一致,否则无法匹配到响应的路由,也就无法调用组件进行展示.
image.png
解析原理:
根据自定义的路由规则(path:/login/:id),生成响应的regex正则,然后用正则去匹配url,然后把解析出来的路径参数放到params对象中
image.png

路由嵌套:
用url来表示login这个路由是属于account这个路由下面的

image.png
通过children属性来指定嵌套内部的路由匹配规则,注意 path不要以'/'开头,否则,会去匹配根目录下的login,测试页面上的<template>标签内必须有一个用于展示内部路由对应组件的容器<router-view>
image.png
命名视图实现经典布局:
在<router-view>标签上加入name属性,指定只能存放这个名称的组件
image.png
定义一个新的路由规则,path:'/',对应多个组件(components 是个对象),其中left,其实就是这个组件的名称,leftBox是组件模板对象.
image.png