zoukankan      html  css  js  c++  java
  • vue传值(小demo)

    vue+element ui实现的。解释大多在代码中(代码臭且长,有错误请指正)--

    代码如下:

    <template>  
    <div class="userList">

    <el-table :data="list" border style=" 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就完成了。

    有不足,请指正。

  • 相关阅读:
    hdu 6702 ^&^ 位运算
    hdu 6709 Fishing Master 贪心
    hdu 6704 K-th occurrence 二分 ST表 后缀数组 主席树
    hdu 1423 Greatest Common Increasing Subsequence 最长公共上升子序列 LCIS
    hdu 5909 Tree Cutting FWT
    luogu P1588 丢失的牛 宽搜
    luogu P1003 铺地毯
    luogu P1104 生日
    luogu P1094 纪念品分组
    luogu P1093 奖学金
  • 原文地址:https://www.cnblogs.com/yangisme/p/11641115.html
Copyright © 2011-2022 走看看