Vue组件传参

Vue组件传参
一、props传参数
1、布尔模式 2、对象模式 3、函数模式
$route.params和$route.query两种方式

二. params传参 ，
1、动态路由

 //子组件
    {
        path: '/Search/:keyword',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true }
    }

2.声明式传参

//父路由组件
<router-link :to="/Search/123">进入搜索页面</router-link>

3.编程式传参

//字符串传参
this.$router.push({
    path:'/Search/${keyword}',
})
//对象传参
 this.$router.push({
      name: "Search",
      params: { keyword: this.keyword },//这种方式的传参必须要有路由的别名name
   });

注意：参数后面加问号，代表可传可不传。或者

 this.$router.push({
        name: "Search",
        params: { keyword: this.keyword || undefined },
      });

获取参数：

this.$route.params.keyword

三、query传参
1.query传参在路径上以?关键字=**的形式存在，刷新页面，数据保留

声明式传参

//父路由组件
<router-link :to="{name:'Search',query:{keyword:123}}">进入搜索页面</router-link>

编程式传参：

//父路由编程式传参
 this.$router.push({
      name: "Search",
      query: { keyword: this.keyword },//这种方式的传参必须要有路由的别名name
   });

this.$router.push(`/Search?k=${this.keyword}`);

获取参数：

this.$route.query.keyword