详解vue.js之props传递参数

关于“详解vue.js之props传递参数”，我会分几个方面进行讲解，以确保回答完整细致。具体的内容如下：

简介

在 Vue.js 中，组件之间的通信是很重要的一环。其中，props 和 events 是两个最基本的通信方式。props 是父组件向子组件传递数据的方式，而 events 则是子组件向父组件发送消息的方式。在这里，我们主要关注 props 传递参数。

如何将数据从父组件传递到子组件

在 Vue.js 中，我们可以通过 props 选项来传递数据。我们可以在组件的 props 中定义需要传递的数据，然后在组件内部使用这些属性，如下例子所示：

<!-- 父组件 -->
<template>
  <div>
    <child-component :title="title" :content="content" />
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      title: '这是标题',
      content: '这是内容',
    }
  },
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  }
}
</script>

在上面的例子中，父组件传递了 title 和 content 两个属性给子组件。在子组件中，我们使用了 props: {} 来定义这些属性，这里我们设置每个属性都是必填的，且必须是字符串类型。

父组件传递对象到子组件

如果父组件需要传递一个对象给子组件，那么我们也可以像下面这样定义 props：

<!-- 父组件 -->
<template>
  <div>
    <child-component :card-info="cardInfo" />
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      cardInfo: {
        name: '张三',
        phone: '123456789',
        address: '北京市海淀区'
      }
    }
  },
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>{{ cardInfo.name }}</h2>
    <p>{{ cardInfo.phone }}</p>
    <p>{{ cardInfo.address }}</p>
  </div>
</template>

<script>
export default {
  props: {
    cardInfo: {
      type: Object,
      required: true
    }
  }
}
</script>

在子组件中，我们可以使用对象的属性来访问相应的属性值。