vue中this.$emit的用法 |
您所在的位置：网站首页 › annabellee诗歌鉴赏英文版 › vue中this.$emit的用法 |
|
转自https://www.cnblogs.com/shenStudy/p/15327718.html vue中this.$emit的用法 this.$emit('事件',参数)用于当子组件需要调用父组件的方法的场景下使用。 与之相对的当父组件需要调用子组件时则使用this.$refs的方法 this.$refs.子组件的ref.子组件的方法实例 为了能清晰的了解具体用法，准备了一个父子组件互调方法的例子。 父组件 父组件调用子组件需要导入子组件的路径并添加组件之后添加子组件标签即可。 修改 // 引入子组件 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) } } } .app-container { height: 100%; background-color: #f1f1f1; } .the-container{ padding: 20px; height: 100%; background-color: #fff; }子组件 子组件在调用父组件是需要在父组件中添加事件来触发父组件的方法。 确定 取消 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) } } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |