前言

使用vue进行项目开发的时候，免不了组件之间的通信。父组件传递给子组件的值，子组件可以通过props获取。子组件想要改变数据，只能通过触发事件告诉父组件。今天的分享我们就通过实例代码来看下VUE中关于父子组件传值的具体方式

1.父组件向子组件传值

在开篇中我们提到父组件向子组件中传值，我们通过props从父组件传递到子组件中去，下面我们就结合代码来具体看下：

父组件

<template>
  <!--通过props向子组件传递name值-->
  <child name="小明"/>
</template>

<script>
  // 引入子组件
  import child from "./child-component"
  export default {
    name: "parent-component",
    components:{
      child
    }
  }
</script>

<style scoped>

</style>

在父组件的代码中我们通过import引入了child-conponent，并且通过props向子组件传递name值

子组件

<template>

  <div>
    通过props从父控件传递的值：{{name}}
  </div>

</template>

<script>
  export default {
    name: "child-component",
    props: {
      name: {
        type: String,
        default: "xiaoming"
      }
    }
  }
</script>

<style scoped>

</style>

效果图

子组件通过声明props变量，接收从父组件传递过来的值，该操作比较简单，当然props传递的值也可以是数据，对象或者是其他值这里就不具体演示了。

VUE的单向数据流中,父级 prop 的更新会向下流动到子组件中，但是反过来则不行。开篇时我们提到子组件向父组件传递值我们需要借助事件传递来完成，下面我们就一起来看下子组件向父组件传值的操作。

2.子组件向父组件传值

在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件

还是跟介绍父组件向子组件传值一样，我们也通过一个具体的例子来一起感受下：我还借助上面父传子的代码在上面进行代码扩充来完成传值操作

由于是从子组件向父组件传值，我们先来看下子组件的代码

<template>

  <div style="background-color: #0a9dc7 ;height:200px">
    通过props从父控件传递的值：{{name}}

    <button @click="btnClick">向父组件传值</button>
  </div>

</template>

<script>
  export default {
    name: "child-component",
    props: {
      name: {
        type: String,
        default: "xiaoming"
      }
    },

    data() {
      return {
        user: {
          name: "xieluoxixi",
          password: "123456"
        },
        other: "other data"
      }
    },
    methods: {
      btnClick() {
        //通过$emit向父组件传递值，其中可以一次性传递多个
        this.$emit("sendEventToParent", this.user, this.other)
      }
    }
  }
</script>

<style scoped>

</style>

关键代码我都有注释，这里就不具体讲解了，下面是父组件的实例代码：

<template>
  <div>
    <p>
      父组件从子组件上获取的值：
      {{user.name+user.password}}
      {{other}}
    </p>
    <!--通过props向子组件传递name值-->
    <p>
      下方为子组件区域
    </p>
    <child name="小明" @sendEventToParent="getValueFromChild"/>
  </div>
</template>

<script>
  // 引入子组件
  import child from "./child-component"

  export default {
    name: "parent-component",
    components: {
      child
    },
    data() {
      return {
        //用于接收从子组件传递回来的值
        user: {},
        other: ""
      }
    },
    methods: {
      getValueFromChild(user, other) {
        // console.log(user)
        // console.log(other)

        this.user = user
        this.other = other
      }
    }
  }
</script>

<style scoped>

</style>

最后我们来看下效果图结束今天 的话题。

效果图