vue父组件向子组件传参，子组件通过props接收传递过来的参数

web前端妹子

已于 2023-03-23 11:46:53 修改

阅读量470

点赞数

分类专栏： vue vue.js 文章标签： vue.js

于 2023-01-29 14:30:16 首次发布

本文链接：https://blog.csdn.net/qq_39695210/article/details/128788581

版权

本文介绍了如何在Vue中实现父组件向子组件传递参数。通过在父组件的 TicketsIndexAction.vue 文件中直接绑定参数到子组件 FilterOptionShapeSelector.vue 的标签上，然后在子组件内部通过props来接收并使用这些传递的参数。

摘要由CSDN通过智能技术生成

父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。

1.父组件直接绑定在子组件的标签上

父组件文件TicketsIndexAction.vue

父组件传递

<template>
  <div>
    <div>票种：</div>
    <!-- 父组件的值直接绑定在子组件的标签上 -->
    <filter-option-shape-selector :items="itemsList" />
  </div>
</template>
<script>
import FilterOptionShapeSelector from '@/components/FilterOptionShapeSelector/FilterOptionShapeSelector';//子组件
export default {
  components: {
    FilterOptionShapeSelector,
  },
  data () {
    return {
    //父组件要传给子组件的值
      itemsList: []//票种列表
    }
  },
  created () {
    this.getTicketTypeData()
  },
  methods: {
    //列表接口
    getTicketTypeData () {
      getTicketTypeData({
        ticket_id: this.ticket_id
      }).then(res =>