solt

将父组件的内容放到子组件指定的位置展示 插槽中的数据使用的是父组件的数据

...
<template id="myUl">
    <div>
        <solt></solt> //匿名插槽
        <solt name="s1"></solt> //具名插槽
    </div>
</template>

...
...
<div id="app">
    <my-ul>
        <!--匿名插槽-->
        <ul>
            <li>123</li>
        </ul>
        <ul solt>
            <li>123</li>
        </ul>
        <!--具名插槽-->
        <ul solt="s1">
            <li>1232143534</li>
        </ul>
    </my-ul>
</div>
...

作用域插槽/官方插槽（带数据的插槽）

父组件提供一套布局 数据都是子组件的

<!--作用域插槽/官方插槽（带数据的插槽）-->
...
<template id="myUl">
    <div>
        <solt :data="name"></solt> //name为子组件中的数据
    </div>
</template>

...
...
<div id="app">
    <my-ul>
        <h1 slot-scope="abc">{{abc.data}}</h1> //abc  这个地方随便写什么都可以
    </my-ul>
</div>

路由传参

路由跳转

• 1、声明式：
• 2、 编程式： $router.push('')

$router: vueRouter实例    $router.push

$route: 对象 $route.params    $route.query

// 编程式写法
...
$router.push('/list')
$router.push({path:'/list'}) //根据路径
$router.push({name: 'list'}) //根据名称
...

// 声明式写法
...
<router-link to=""> 
...

传参

• 需要在路由文件中设置

// router/index.js
...
routes: [
    {
        path: '/home/:id/:name', // :id 、:name 为传参所用
        name: 'Home',
        component: () => import('@/components/module/Home')
    }
]
...
//Home.vue
...
<router-link to="/home/100/cxy" /> //传参
...
<!--路由获取-->
$route.params.id
$route.params.name

• 不需要在路由文件中设置

// router/index.js
...
routes: [
    {
        path: '/home', 
        name: 'Home',
        component: () => import('@/components/module/Home')
    }
]
...
//Home.vue
...
<router-link to="/home?id=1000">a</router-link> //传参
...
<!--路由获取-->
$route.query.id

• 参数为动态的

//Home.vue
...
<router-link ：to="/home" + id >a</router-link> //传参
<router-link ：to="{path: 'home',query: {id: 1000}}" >a</router-link> //传参
...

• 编程式写法

this.$router.push({path: 'home',query: {id: 1000}}) //根据路径
this.$router.push({name: 'list'}) //根据名称

<!--使用params-->
// router/index.js
...
routes: [
    {
        path: '/home/:id/:name', // :id 、:name 为传参所用
        name: 'Home',
        component: () => import('@/components/module/Home')
    }
]
...
//Home.vue
...
this.$router.push({path: '/home',params: {id: 1000}}) //会报错
this.$router.push({name: 'Home',params: {id: 1000}}) //根据路径
...
<!--路由获取-->
$route.params.id
$route.params.name