问答

vue如何组件如何调用执行自己的生命周期(头部input搜索的实现问

作者:admin 2021-07-10 我要评论

题目可能描述的不清楚 请看具体需求: header.vue 封装的全局的 头部组件,带一个搜索框,所有页面都会引入这个这个header ` div style="width:326px;margin:0 1...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

题目可能描述的不清楚
请看具体需求:

header.vue 封装的全局的 头部组件,带一个搜索框,所有页面都会引入这个这个header

`

<div style="width:326px;margin:0 100px">
        <el-input placeholder="请输入搜索内容" class="input-with-select" v-model="keyword">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>

`

其中这个search方法 带着分页参数跳转到 detail.vue组件,这个组件中也引入了header.vue

`

search() {
     this.$router.push({
       path: '/detail',
       query:{
         currentPage:1,
         size:10,
         keyword:this.keyword
       }
     });
     this.keyword = "";
   }

`

在detal.vue中 拿到传递来的参数 进行搜索查询 返回结果 展示结果

`

created() {
 
    this.keyword = this.$route.query.keyword;
    let data = {};
    data.currentPage = this.$route.query.currentPage;
    data.size = this.$route.query.size;
    data.query = {};
    data.query.keyword = this.keyword;
    this.getSearch(data);
  } 
},

`

到这里 逻辑没有问题

问题出在下面

当在detail.vue 这个组件中 header的input里面输入 关键字搜索的时候

也同样走this.search的方法

但是 created不执行 url里面的 参数貌似也没有变化

求问 这个时候 要怎么写 才能在detail.vue中同样能执行搜索查询
或者有别的思路吗

###

"url里面的 参数貌似也没有变化"可能是你写法有问题。跳转到相同路由时,组件不会刷新,生命周期也不会执行。当你的参数变化时,可以监听route变化。


watch:{
    "route"(to,from){
        this.keyword = to.query.keyword;
        let data = {};
        data.currentPage = to.query.currentPage;
        data.size = to.query.size;
        data.query = {};
        data.query.keyword = this.keyword;
        this.getSearch(data);
    }
}
###

不是应该 watch 吗?

###

你的组件detailcreated生命周期不执行?还是方法不执行?生命周期肯定是执行了。

然后你的header组件,search就是一个跳转;你detail引用了header组件,你点击search,肯定执行的是header中定义的search方法呀! 你想要在detail中执行搜索,detail必须监听header中的触发search的操作,header组件中就要有个$emit触发,detail才能监听到。

// header
methods: {
    onSearch() {
        this.$emit('search', [可选参数])
    }
}

// detail
<template>
    <div>
        <header @search="handleSearch"></header>
        // ...
    </div>
</template>

methods: {
    handleSearch(params) {
        // TODO...
    }
}
###

header组件可以通过$emit 触发details组件的方法

###

子组件的方法在父组件运行的时候生命周期就已经运行了,你可以console调试一下就知道什么原因了,用$emit,所有控制方法在父组件里执行
watch监听keyword改变执行函数

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementUI表单Object.assign处理后无法

    elementUI表单Object.assign处理后无法

  • nacos作为配置中,有时可以加载到配置

    nacos作为配置中,有时可以加载到配置

  • font-spider压缩字体后,文件大小没有

    font-spider压缩字体后,文件大小没有

  • Vue SSR babel node_modules中的一个包

    Vue SSR babel node_modules中的一个包

腾讯云代理商
海外云服务器