vue 父子组件之间参数传递

一、父组件向子组件传值

1.父组件.vue  文件

<template>
  <div class="hello" style="margin: 500px 200px">
    <DialogWeb ref="dialog" :msg="msg"></DialogWeb>
    <h3> 我 是 父 组 件</h3>
    <p>父组件参数：<span style="color: blue; font-size: 22px">{{msg}}</span></p>
    <el-button type="primary" v-on:click="clickDialog">给子组件传值</el-button>
  </div>
</template>

<script>
    import DialogWeb from './DialogWeb'

    export default {
        data() {
            return {
                msg: '2019-12-3 16:01:07(我是父组件的参数)',
            }
        },

        components: {
            DialogWeb
        },
        mounted() {
        },
        methods: {
            //父---子
            clickDialog() {
                this.$refs.dialog.Visible = true;
            },
        }
    }
</script>

2.子组件.vue 文件

<template>
  <div>
    <el-dialog width="600px" title="dialog" class="Dialog" :visible.sync="Visible">
      <div class="detDiglog1">
        <h3> 我 是 子 组 件</h3>
        <p>从父组件获取的参数为：<span style="font-weight: 800;color: red">{{msg}}</span></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>

    export default {
        props: {
            msg: String //父组件传递过来的msg属性，
        },
        data() {
            return {
                Visible: false,
                childData: '12345(我是子组件的参数)'
            }
        },
        mounted() {
        },
        methods: {}
    }
</script>

3.运行结果如图所示：

 

二、子组件向父组件传值

1.子组件.vue 文件

<template>
  <div>
    <el-dialog width="600px" title="dialog" class="Dialog" :visible.sync="Visible">
      <div class="detDiglog1">
        <h3> 我 是 子 组 件</h3>
        <el-button type="primary" v-on:click="sendMsg">给父组件传值</el-button>
        <p>子组件参数：{{childData}}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>

    export default {
        data() {
            return {
                Visible: false,
                childData: '12345(我是子组件的参数)'
            }
        },
        mounted() {
        },
        methods: {
            sendMsg() {
                //向父组件传值
                this.$emit('event1', this.childData)
            }
        }
    }
</script>

2.父组件.vue 文件

<template>
  <div class="hello" style="margin: 500px 200px">
    <!-- change子--父    -->
    <DialogWeb ref="dialog" :msg="msg" @event1="change($event)"></DialogWeb>
    <h3> 我 是 父 组 件</h3>
    <el-button type="primary" v-on:click="clickDialog">给子组件传值</el-button>
    <p>获取子组件参数： {{newData}}</p>
  </div>
</template>

<script>
    import DialogWeb from './DialogWeb'

    export default {
        data() {
            return {
                newData: ''
            }
        },

        components: {
            DialogWeb
        },
        mounted() {
        },
        methods: {
            //父---子
            clickDialog() {
                this.$refs.dialog.Visible = true;
            },
            //子---父
            change(data) {
                this.newData = data;
            }
        }
    }
</script>

3.运行结果如图所示：

总结：愿能解决您的问题。