vue传值(小demo)

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就完成了。

有不足，请指正。

来源：https://www.cnblogs.com/yangisme/p/11641115.html