Vue基础知识

组件的注册

1. 局部注册

 // ... import HelloWorld from './components/HelloWorld.vue'
  components: {
    组件名, // 等同于 HelloWorld:HelloWorld;
  }

2. 全局注册

 // main.js
Vue.component(tagName,组件实例)
// tagName为组件名 options为配置选项，注册后使用 <tagName></tagName>调用

父子组件传值

父组件向子组件传值

....
  props: [属性名]
....

插槽

匿名插槽

允许存在多个匿名插槽,若有多个匿名插槽，则会渲染多份
插槽中可以写默认值 当福组件中没有写入内容（内容为空）的时候，会显示子组件的默认内容
当父组件写入了内容时会替换子组件的默认内容

具名插槽

旧的语法

// 定义插槽
<div>
  <slot name="header"> </slot>
</div>
// 使用插槽
<template slot="header"> </template>

作用域插槽

将子组件中数据的作用域,进行提升，暴露出来以便父组件使用
子组件的属性会封装成键名称是属性名，值是绑定值的键值对
父组件需要 slot-scope="自定义名称" 自定义名称就是子组件封装的键值对
slot-scope="{val}" 对封装的键值对进行结构赋值

Vue Router

按需引入 import() 每次执行逻辑的时候引入 不使用频繁执行引入逻辑的场景
直接引入 import * from

路由跳转的区别

this.$router.push 向history栈加入一条新纪录
使用router-link相当于调用router.push(...)
this.$roiter.replace 替换当前页面的路由
push 回退会回到上一次点击的页面（之前的URL）
replace 当前页面的上一次页面

路由跳转语法

// 字符串 路径名称
router.push('home')
// 对象  路径名称
router.push({path:'home'})
// 命名路由  路由的命名 
router.push({name:'user',params:{userId:'123'}})

路由传参 query和param的区别

1. params 地址栏不会变化
   刷新页面 params的数据会丢失