Vue基础4 (简单易上手，适合前后端)

基础-组件-组件通信的几种情况
组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信 组件之间的通信根据关系的可以分为：
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实例上

    
    
    



    

        
        主页
        热点
        关于我们
        
        
    
    
    
    

基础-路由-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样式即可