有什么岁月静好，不过是有人替你负重前行！哪

vue中this.$emit的用法 使用this.$refs的方法

vue中this.$emit的用法

用于当子组件需要调用父组件的方法的场景下使用。

?
1
this.$emit('事件',参数)

与之相对的当父组件需要调用子组件时则使用this.$refs的方法

?
1
this.$refs.子组件的ref.子组件的方法

实例

为了能清晰的了解具体用法，准备了一个父子组件互调方法的例子。

父组件

父组件调用子组件需要导入子组件的路径并添加组件之后添加子组件标签即可。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
  <div class="app-container">
    <div class="the-container">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
        />
        <el-table-column
          prop="date"
          label="日期"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="province"
          label="省份"
          show-overflow-tooltip
        />
        <el-table-column
          prop="city"
          label="市区"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        />
        <el-table-column
          prop="zip"
          label="邮编"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="alter(row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Amend ref="amend" @submit="refresh"></Amend>
  </div>
</template>
 
<script>
// 引入子组件
import Amend from './amend'
export default {
  components: {
    // 子组件名称
    Amend
  },
  data() {
    return {
      // 表格数据
      tableData: [{
        date: '2016-05-03',
        name: '小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '小张',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '小明',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '小红',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '小李',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '小刘',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    alter(row) {
      // 调用子组件方法并传参，row为该行数据
      this.$refs.amend.show(row)
      console.log(row)
    },
    refresh(data) {
      // 子组件调用父组件的方法并传参
      console.log(data)
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .app-container {
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    padding: 20px;
    height: 100%;
    background-color: #fff;
  }
</style>

子组件

子组件在调用父组件是需要在父组件中添加事件来触发父组件的方法。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    append-to-body
  >
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
      <el-form-item label="日期" prop="date">
        <el-input v-model="ruleForm.date" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model.number="ruleForm.province" />
      </el-form-item>
      <el-form-item label="市区" prop="city">
        <el-input v-model.number="ruleForm.city" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model.number="ruleForm.address" />
      </el-form-item>
      <el-form-item label="邮编" prop="zip">
        <el-input v-model.number="ruleForm.zip" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="primary" @click="submitForm">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
 
</template>
 
<script>
export default {
  name: 'Amend',
  data() {
    return {
      // 是否显示对话框，true为显示，false为不显示
      dialogVisible: false,
      // 表单数据
      ruleForm: {
        date: '',
        name: '',
        province: '',
        city: '',
        address: '',
        zip: 1
      },
      // 返回值数据
      formList: {}
    }
  },
  methods: {
    show(row) {
      // 将该行数据赋给表单
      this.ruleForm = row
      console.log(this.ruleForm)
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    submitForm() {
      this.formList = this.ruleForm
      this.dialogVisible = false
      // 子组件调用父组件的方法并传参
      this.$emit('submit', this.formList)
    }
  }
}
</script>
 
<style scoped>
 
</style>

以上为小编总结的，this.$emit的使用方法，还有this.$refs的使用方法，不理解的小伙伴可以多看几遍。

posted @   longfei825  阅读(866)  评论(0)  编辑  收藏  举报
相关博文：
· vue的基础语法，基础英语
· vue框架解析
· vue中的this.$emit方法
· this.$refs与this.$emit()
· vue中 关于$emit的用法
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示