Question

我已经搜索了几个小时，但我想不起来。我有什么办法可以绑定来自输入的数据，将其发送到模板，然后在这里使用数据？

让我画画...

edit.php

<form>
  <input v-model="?">
</form>

<prod-preview name="somehowsendthename"></prod-preview>

prod-preview.vue

<template>
    <h1>{{ name }}</h1>
</template>
<script>
export default {
    name: "product-preview",
    props: ["name"],
    data(){
        return {
            name: ""
        }
    },
}

不用担心绑定实际的组件，这是可行的。谢谢

Answer 1

类似的事情应该起作用：

// edit.vue
<template>
    <form>
      <input v-model="name">
    </form>
    <prod-preview :name="name"></prod-preview>
</template>
<script>
import ProdPreview from './prod-preview'
export default {
    name: "edit",
    components: [ProdPreview],
    data(){
        return {
            name: ""
        }
    },
}
</script>

// prod-preview.vue
<template>
    <h1>{{ name }}</h1>
</template>
<script>
export default {
    name: "product-preview",
    props: ["name"]
}
</script>

Answer 2

要从刀片传递名称并将其绑定到视图组件中的数据，您需要使用其他名称的道具，例如initialName，然后设置使用v-绑定的数据名称。使用initialName这样的模型...

export default {
  name: "product-preview",
  props: ["initialName"],
  data(){
      return {
          name: this.initialName
      }
  },
}

请注意html属性不区分大小写，因此您可以这样传递它，正确的prop会接收它：

<prod-preview initial-name="{{ $name }}"></prod-preview>

您现在可以v绑定到“名称”，当您更改输入时，它将保持数据属性名称为最新，并且您将不会尝试更改不应该做的道具。

两种方式绑定到模板

2 个答案: