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

有不足，请指正。