Vue.js 中父子组件之间的相互传值详解-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中，组件通信是非常常见的需求。在组件之间传递数据，就需要使用 Vue.js 提供的 props 和 emit 两个 API，其中，父组件通过 props 将数据传给子组件，子组件通过 emit 事件，将数据传回给父组件。而在父子组件之间传递数据时，还需要考虑到数据类型、数据格式、数据状态等因素。

一、在子组件中获取父组件传过来的数据

子组件通过 props 来接收父组件传递过来的数据。例如，父组件传入一个 message 变量，子组件可以通过 props 来接收。

父组件：

// javascriptcn.com 代码示例
<template>
  <div>
    <my-component :message="msg"></my-component>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue';

  export default {
    components: { MyComponent },
    data() {
      return {
        msg: 'Hello, Vue.js!'
      }
    }
  }
</script>

子组件：

// javascriptcn.com 代码示例
<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: String
    }
  }
</script>

在子组件中，需要使用 props 属性来定义参数类型，以及通过定义 props 的 properties 来传递数据。在上面的例子中，如果父组件传递的数据不属于 String 类型，那么 Vue.js 会提示警告。

二、在子组件中实时响应父组件数据的变化

Vue.js 中，父子组件之间的数据传递是单向的。也就是说，如果父组件的数据发生了变化，那么子组件中并不能实时响应这个变化。如果需要实时响应，我们需要使用 Vue.js 提供的 computed 属性，以及 watch 属性。

如果我们需要在子组件中实时响应父组件传递的数据变化，可以通过 computed 属性来实现。例如，在下面的例子中，我们可以通过 computed 属性来监听父组件传递的 msg 变量的变化。

父组件：

// javascriptcn.com 代码示例
<template>
  <div>
    <my-component :message="msg"></my-component>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue';

  export default {
    components: { MyComponent },
    data() {
      return {
        msg: 'Hello, Vue.js!'
      }
    }
  }
</script>

子组件：

// javascriptcn.com 代码示例
<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      message: String
    },
    computed: {
      msg: function () {
        return this.message
      }
    }
  }
</script>

在上面的代码中，我们定义了一个 computed 属性，用来监听父组件传递过来的 message 变量的变化。当父组件中的 msg 变量发生变化时，子组件中的 msg 属性也会自动更新，从而实现了实时响应的效果。

另外，如果需要在子组件中实时响应父组件传递的数据变化，我们还可以使用 watch 属性来实现。例如，在下面的例子中，我们可以通过 watch 属性来监听父组件传递的 msg 变量的变化。

父组件：

// javascriptcn.com 代码示例
<template>
  <div>
    <my-component :message="msg"></my-component>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue';

  export default {
    components: { MyComponent },
    data() {
      return {
        msg: 'Hello, Vue.js!'
      }
    }
  }
</script>

子组件：

// javascriptcn.com 代码示例
<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      message: String
    },
    data() {
      return {
        msg: ''
      }
    },
    watch: {
      message: function (newValue, oldValue) {
        this.msg = newValue
      }
    }
  }
</script>

在上面的代码中，我们通过 watch 属性来监听父组件传递过来的 message 变量的变化，当其发生变化时，子组件中的 msg 属性也会自动更新，从而实现了实时响应的效果。

三、在子组件中通过 emit 事件向父组件传递数据

在 Vue.js 中，子组件通过 emit 事件向父组件传递数据。例如，在下面的例子中，当子组件中的按钮被点击时，就会触发一个名为 sendMsg 的自定义事件，同时传递了一个对象作为参数。

父组件：

// javascriptcn.com 代码示例
<template>
  <div>
    <my-component @sendMsg="handleMsg"></my-component>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue';

  export default {
    components: { MyComponent },
    methods: {
      handleMsg: function (msg) {
        console.log(msg)
      }
    }
  }
</script>

子组件：

// javascriptcn.com 代码示例
<template>
  <div>
    <button @click="sendMsg">发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMsg: function () {
        this.$emit('sendMsg', { 'message': 'Hello, Vue.js!' })
      }
    }
  }
</script>

在上面的代码中，我们通过 $emit 方法来触发一个名为 sendMsg 的自定义事件，同时传递了一个对象作为参数。父组件中，我们通过 @sendMsg 来监听 sendMsg 事件，从而获取子组件中传递的数据。

四、总结

在 Vue.js 中，父子组件之间的数据传递是一个非常重要的应用场景。在开发过程中，我们需要根据具体需求，选择合适的传值方式，以及注意传值参数类型、状态等因素。本文介绍了 Vue.js 中的父子组件传值方式，希望对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652ac5cf7d4982a6ebd002ac