开门见山，先来一个例子：
- <router-view
- @parentsearch="search"
- </router-view>
- <script>
- let indexComponent = {
- props: ["file"],
- data() {
- return {
- fn: "",
- ft: "",
- st: "",
- et: ""
- }
- },
- template:
- `<el-form :inline="true" class="demo-form-inline">
- <el-form-item label="文件名">
- <el-input placeholder="文件名" v-model="fn" @keyup.enter.native="search(fn,ft,st,et)"></el-input>
- </el-form-item>
- <el-form-item label="文件类型">
- <el-input placeholder="文件类型" v-model="ft" @keyup.enter.native="search(fn,ft,st,et)"></el-input>
- </el-form-item>
- <el-form-item label="上传时间">
- <el-date-picker type="date" placeholder="开始日期" v-model="st" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> -
- <el-date-picker type="date" placeholder="结束日期" v-model="et" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
- </el-form-item>
- <el-button type="primary" @click="search(fn,ft,st,et)">查询</el-button>
- </el-form>`,
- methods: {
- search: function (fn, ft, st, et) {
- this.$emit('parentsearch', fn,ft,st,et);
- }
- }
- }
- </script>
父组件的search事件没有展示在以上代码。
无参数：this.$emit("search");
带参数就不像我们平常写函数“search(filename)”这样了
一个参数：this.$emit("search",filename);
多个参数（依次在列出）：this.$emit("search",filename,st,et);