Question

我来自一个React世界。在React中，接收子项的组件可以在渲染之前轻松地对其进行修改（修改或添加道具）。在阅读文档并在论坛上搜索数小时后，我还没有在VueJS中找到实现此目的的方法。

这是一些代码：

<FormField :fieldName="myFieldName">
    <NumericInput 
        :value="2"
    ></NumericInput>
</FormField>

我希望FormField将fieldName传递给NumercInput：

export default class FormField {
    @Prop()
    private fieldName!: string;
}

<template>
    <div class="form-field">
        <slot :fieldName="fieldName"></slot>
    </div>
</template>

但是它不起作用。 NumericInput未收到名称。根据文档，我应该执行以下操作：

<FormField :fieldName="myFieldName">
    <template v-slot="slotProps">
        <NumericInput 
            :fieldName="slotProps.fieldName"
            :value="2"
        ></NumericInput>
    </template>
</FormField>

它确实起作用。但是我不希望祖父母负责在FormField和NumericInput之间进行道具连接。我希望FormField决定是否以及如何将fieldName传递给NumericInput。我怎么做？我也不明白为什么我必须在fieldName和NumericInput上指定slot的绑定才能起作用？

在React中，我可以使用React.children遍历孩子，然后添加或修改道具。

Answer 1

you can use props to pass data from a parent to a child if that it what your after
an example for verification
<html>
  <head>
    <title>props and components</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="subText">
        <storage />
      </div>
    </div>
    <script>
      Vue.component('storage', {
        data() {
          return {
            message: 'hi from storage component',
            message2: 'hi from product component',
          }
        },
        template: `
        <div>
            {{ message }}
            <product :message2="message2" />
        </div>`,
      })

      Vue.component('product', {
        props: {
          message2: {
            type: String,
            required: true,
          },
        },
        template: `
       <div>
        {{ message2 }}
        </div>
       `,
      })

      var app = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

Answer 2

这似乎是基本的亲子道具传递事物。现在不要使用v槽。

@Override
public List<ComplementoMaterial> findSomething(String codigoPrestador, String documentoPrestador, String numeroLote, String codDocumento, List<String> codigosServicos) {
    List<String> substrings = new List<>(codigosServicos.size());
    for (String name : codigosServicos) {
        substrings.add(name.substring(4));
    }
    return builder().query(sqlComplementos())
        .set("codPrestador", codigoPrestador)
        .set("docPrestador", documentoPrestador)
        .set("numeroLote", numeroLote)
        .set("codDocumento", codDocumento)
        // add list of substrings instead of the original list
        .set("codServicos", substrings)
        .mapper(new RowMapper<ComplementoMaterial>() {
            @Override
            public ComplementoMaterial mapRow(ResultSet rs, int rowNum) throws SQLException {
                ComplementoMaterial c = new ComplementoMaterial();
                c.setCodigoServico(rs.getLong("COD_SERVICO"));
                c.setRegistroAnvisa(rs.getString("COD_MATERIAL"));
                c.setReferencia(rs.getString("COD_REF_MATERIAL"));
                c.setAutorizacaoFuncionamento(rs.getString("NUM_AUT_FAT"));
                return c;
            }
        }).executeQuery();
}

在FormField组件中，声明

<FormField>
        <NumericInput 
            :fieldName="thisWillBePropToChild"
        ></NumericInput>
</FormField>

像

一样修改您的fieldName

data () {
    return { childFieldName: '' }
},
props: ['fieldName']

在NumericInput组件中，声明

this.childFieldName = this.fieldName

并使用NumericInput组件中的任何位置进行访问

props: ['childFieldName']

使用两个不同的名称，因为您需要修改道具然后发送。不建议直接变异道具。

如果您想更改任何道具并使其在子组件中具有反应性（如React中的状态），则将使用数据（可以说React中的状态）属性。

Vue.js，道具和作用域插槽

2 个答案: