Vue中父子组件相互传值

一、父组件向子组件传值

1、在父组件中引入子组件

import Son from './Son'

2、在父组件中使用v-bind绑定数据到子组件

<son v-bind:msg="msg"></son>

3、在子组件中使用props接收

props: {
        msg: {  // 属性名来自父组件的数据源的key
            type: String,   // 当前msg所属的类型
            default: ''     // 如果取不到的默认值
       },
},

二、子组件向父组件传值

1、在子组件中创建点击事件

<button @click="sendToParent"></button>

2、子组件数据的准备

data() {
      return {
        str: '子组件传值到父组件：0420'
    }
},
    methods: {
      sendToParent() {
        this.$emit('show',this.str)
    }
},

3、父组件接收

<son v-bind:msg="msg" @show="getData"></son>

4、父组件中定义方法进行接收

data() {
        return {
            msg: '来自父组件的值:123456',

            abc:''
      }
},
    methods: {
      getData(val) {  // 这里的val是取出的子组件str值
        this.abc=val    // 将val值赋给abc  并取值显示
      }
},

三、综合代码展示

1、Parent.vue

<template>
  <div>
    <h3>我是父组件</h3>

    <!-- 使用组件  并使用v-bind绑定传值 -->
    <son v-bind:msg="msg" @show="getData"></son>

    <hr>
    {{abc}}
  </div>
</template>

<script>
// 父组件向子组件传值

// 1、在父组件中引入子组件
// 2、注册子组件  vcompon
// 3、使用组件  并使用v-bind绑定传值

import Son from './Son'

export default {
    components: {
         Son,
    },
    data() {
        return {
            msg: '来自父组件的值:123456',

            abc:''
        }
    },
    methods: {
      getData(val) {  // 这里的val是取出的子组件str值
        this.abc=val    // 将val值赋给abc  并取值显示
      }
    },
};
</script>

<style lang="scss" scoped>
</style>

2、Son.vue

<template>
  <div>
    <h3>我是子组件</h3>

    {{msg}}
    <br>
    <button @click="sendToParent">点击显示</button>
  </div>
</template>

<script>
// 接收父组件的传值

export default {
    props: {
        msg: {  // 属性名来自父组件的数据源的key
            type: String,   // 当前msg所属的类型
            default: ''     // 如果取不到的默认值
        },
    },
    data() {
      return {
        str: '子组件传值到父组件0420'
      }
    },
    methods: {
      sendToParent() {
        this.$emit('show',this.str)
      }
    },
};
</script>

<style lang="scss" scoped>
</style>