vue3点击搜索将搜索框的值传到次搜索框并搜索,跳转的时候把输入内容作为参数传递到跳转页,跳转页加载的时候接收传递参数并执行搜索方法
时间: 2024-02-19 11:03:06 浏览: 17
好的,对于你的问题,可以按照以下步骤实现:
1. 在搜索框组件中,绑定一个点击事件,当用户点击搜索按钮时,触发该事件。
2. 在点击事件中,获取当前搜索框中的值,并将其作为参数传递给父组件的搜索方法。
```
methods: {
handleSearch() {
const searchValue = this.searchValue;
this.$emit('search', searchValue);
}
}
```
3. 在父组件中,监听子组件的搜索事件,并在事件回调函数中执行搜索方法,并将输入的内容作为参数传递给跳转页。
```
<search-box @search="handleSearch"></search-box>
methods: {
handleSearch(searchValue) {
this.$router.push({
path: '/search',
query: {
keyword: searchValue
}
});
}
}
```
4. 在跳转页中,通过 `$route.query` 属性获取传递的参数,并执行搜索方法。
```
created() {
const keyword = this.$route.query.keyword;
this.search(keyword);
}
```
以上是一个基本的实现思路,具体实现还需要根据你的业务逻辑进行调整。希望能对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![png](https://img-home.csdnimg.cn/images/20210720083516.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)