Question

我有以下内容，据我所知，应该将html属性的值传递给具有相同名称的@Prop，但是我的console.log始终是未定义的。如何实现的？

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component({})
    export default class RelayComponent extends Vue {
    @Prop([String]) service: string;

    constructor() {
        super();
        console.log(this.service);
...

HTML

<template>
    <div service="expecting this value passed"></div>
</template>
<script src="./relay.ts"></script>

Answer 1

Vue道具

Vue道具旨在将数据从父Vue组件或实例传递到子Vue组件。

因此，您具有一个vue组件，您设置了@Prop，然后获得了父级 html 的道具。如果您有my-parent和my-child组件，则my-parent模板可以是：

<template>
    <my-child count="7"></my-child>
</template>

所以子组件是这样的：

<template>
    <div class="counter">{{count}}</div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';

  @Component({})
    export default class myChild extends Vue {
    @Prop() count: number;
  }
</script>

将获得7作为计数道具。

现在，在您的情况下，只有一个组件，并且您正在尝试从HTML 设置组件的service变量。这有点奇怪，因为Vue的目的是从组件数据中实现声明式呈现：是对数据变化做出反应的HTML，而不是从HTML中获取数据的组件。

（当然，您还可以设置v-model和事件侦听器，以使您的组件对用户输入做出反应，但这是另一回事了。

基本上，如果我正确理解了您想做什么，那么您的问题是，您正在尝试从RelayComponent组件的HTML中获取service道具。

相反，您应该在组件父项中设置service属性：

// Code of some parent component that renders the RelayComponent
<template>
  <relay-component service="this would set the service prop as a string"></relay-component>
</template>

仅在处理对象时，通常不传递纯字符串，而是javascript对象，而service变量可能是一个对象，因此您要进行以下更改：

<template>
  <relay-component v-bind:service="serviceVariableInTheParentComponent"></relay-component>
</template>

父组件的service中有一个data变量。

构造函数和救生钩

警惕在vue类组件中显式调用constructor。如果您在构造函数中修改组件状态，则可以破坏组件。

可能，您应该考虑在每个Vue组件中都使用created() lifecycle hook而不是constructor()。

将数据从模板传递到组件

1 个答案:

Vue道具

构造函数和救生钩