vue传值(小demo)
2024-10-01 06:25:59
vue+element ui实现的。解释大多在代码中（代码臭且长，有错误请指正）--
代码如下：
<template>
<div class="userList">
<el-table :data="list" border style="width: 60%;">
<el-table-column type="selection" width="60"/>
<el-table-column prop="userName" label="人物" width="300"/>
<el-table-column prop="sect" label="教派" width="300"/>
<el-table-column prop="kongfu" label="所修功法" width="300"/>
<el-table-column label="操作" width="300">
<template>
<el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
</template>
</el-table-column>
</el-table> <el-dialog title="用户列表" :visible.sync="dialogFormVisible" width="30%" center>
弹窗组件，props传值最重要的就是在这里绑定:form="list"--这里的list是点击编辑，获取到的当前行的数据。
form则是子组件那边接受定义的数据，子组件props中可看到。
run是传过去的函数。子组件通过$emit溜过来触发,也就是子组件中this.$emit('close','')
来触发父组件中定义的事件,close就是触发@close="cancel()"，@change相同
<popup :form="list" :run="run" @close="cancel()" @change="sub()"/>
</el-dialog>
</div>
</template>
<script> import popup from './popup.vue';
export default {
components: {
popup
},
data() {
return {
dialogFormVisible: false,
form: {
userName: '',
sect: '',
kongfu: '',
},
list: [
{
userName: '周芷若',
userId: '1',
sect: '峨眉',
kongfu: '九阴白骨爪'
},
{
userName: '张无忌',
userId: '2',
sect: '明教',
kongfu: '乾坤大挪移'
},
{
userName: '赵敏',
userId: '3',
sect: '朝廷',
kongfu: '有人'
},
{
userName: '张三丰',
userId: '4',
sect: '武当',
kongfu: '太极'
}
],
};
},
created() {
},
methods: {
//编辑
handleEdit(row) {
this.list = Object.assign({},row)
this.dialogFormVisible = true
},
//提交
sub(data) {
this.cancel()
},
//取消
cancel() {
this.dialogFormVisible = false
},
//删除
handleDelete(row) {
this.list.splice(row,1)
},
//测试props传递函数玩的
run() {
alert('儿子那边打开他爹这边的')
},
}
};
</script>
用户列表为element中dialog对话框，这个demo主要实现的就是父组件传值到子组件也就是传到这些个输入框中。
<template>
<div class="popup">
<el-form :data="form" ref="form" label-width="30%">
<el-form-item label="人物" prop="userName">
<el-input v-model="form.userName" placeholder="用户名称"/>
</el-form-item>
<el-form-item label="教派" prop="sect">
<el-input v-model="form.sect" placeholder="教派"/>
</el-form-item>
<el-form-item label="所修功法" prop="kongfu">
<el-input v-model="form.kongfu" placeholder="所修功法"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel()">取消</el-button>
<el-button type="primary" @click="sub()">提交</el-button>
</div>
</div>
</template> <script>
export default {
name: "popup",
接收父组件传过来数据和函数
props: {
form:{
type:Object,
dafaule : {
userName:'',
sect: '',
kongfu: '',
}
},
run:{
Function
}
},
data() {
return {
}
},
methods: {
//取消
cancel() {
this.$emit('close','');
点击取消触发父组件传过来的事件run，弹出下面的图
this.run()
},
//提交
sub() {this.$emit('change', '')
},
}
}
</script>
至此小demo就完成了。
有不足，请指正。
最新文章
- 华为Java编程军规，每季度代码验收标准
- Mac Pro 下使用svn
- C++ 箴言
- php 遍历目录下的所以文件和文件夹
- 创建一个swift项目
- WPF - MVVM - 如何将ComboBox的Selectchange事件binding到ViewModel
- TYVJ P1091 等差数列 Label：dp
- P1032 字串变换
- jquery iframe高度自适应
- 理解Objective C 中id
- Longest Increasing Subsequence（DP）
- ThinkPHP框架安全性能分析
- JS浏览器对象-Screen对象
- 【leetcode】Merge Sorted Array（合并两个有序数组到其中一个数组中）
- RMAN简单备份
- js的数组操作
- UNIX网络编程 卷2：进程间通信
- VMware Player安装centos
- C#Stopwatch的使用,性能测试
- Spring-mvc介绍