vue学习笔记:solt,路由传参

·  阅读 156

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
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改