经常对着电脑不好,快去锻炼吧!

Vue.js Router子组件事件传参到父组件事件-this.$emit

   

开门见山,先来一个例子:

  1.  <router-view
  2.              @parentsearch=“search”
  3. </router-view>
  4. <script>
  5. let indexComponent = {
  6.     props: [“file”],
  7.     data() {
  8.         return {
  9.             fn: “”,
  10.             ft: “”,
  11.             st: “”,
  12.             et: “”
  13.         }
  14.     },
  15.     template:
  16.         `<el-form :inline=“true” class=“demo-form-inline”>
  17.             <el-form-item label=“文件名”>
  18.                 <el-input placeholder=“文件名” v-model=“fn” @keyup.enter.native=“search(fn,ft,st,et)”></el-input>
  19.             </el-form-item>
  20.             <el-form-item label=“文件类型”>
  21.                 <el-input placeholder=“文件类型” v-model=“ft” @keyup.enter.native=“search(fn,ft,st,et)”></el-input>
  22.             </el-form-item>
  23.             <el-form-item label=“上传时间”>
  24.                 <el-date-picker type=“date” placeholder=“开始日期” v-model=“st” format=“yyyy-MM-dd” value-format=“yyyy-MM-dd”> </el-date-picker> –
  25.                 <el-date-picker type=“date” placeholder=“结束日期” v-model=“et” format=“yyyy-MM-dd” value-format=“yyyy-MM-dd”> </el-date-picker>
  26.             </el-form-item>
  27.             <el-button type=“primary” @click=“search(fn,ft,st,et)”>查询</el-button>
  28.         </el-form>`,
  29.     methods: {
  30.         search: function (fn, ft, st, et) {
  31.             this.$emit(‘parentsearch’, fn,ft,st,et);
  32.         }
  33.     }
  34. }
  35. </script>

父组件的search事件没有展示在以上代码。

无参数:this.$emit(“search”);

带参数就不像我们平常写函数“search(filename)”这样了

一个参数:this.$emit(“search”,filename);

多个参数(依次在列出):this.$emit(“search”,filename,st,et);

未经允许不得转载:Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js Router子组件事件传参到父组件事件-this.$emit
标签:
评论 0
 
 
发表评论